快捷導(dǎo)航

VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn)

更新時(shí)間：2019年11月25日 10:49:14 作者：CHICAGO

這篇文章主要介紹了VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

為何需要配置多頁(yè)面?

在實(shí)際工作中，肯定會(huì)遇到大型項(xiàng)目，往往一個(gè)架構(gòu)里面會(huì)開發(fā)多個(gè)應(yīng)用，而這些應(yīng)用又沒(méi)有太大的關(guān)聯(lián)，但有可能會(huì)共用一些組件或者是樣式表等，那么就會(huì)出現(xiàn)一個(gè)問(wèn)題，打包的時(shí)候會(huì)將這些互不相關(guān)的應(yīng)用全部打包。

而因?yàn)槟_手架VueCli所以構(gòu)建的項(xiàng)目屬于單頁(yè)面應(yīng)用，因此我們就需要手動(dòng)去配置，搭建一個(gè)多入口，多應(yīng)用的體系

需求

首頁(yè)顯示各個(gè)應(yīng)用名稱，點(diǎn)擊進(jìn)去各自應(yīng)用

實(shí)現(xiàn)

使用vue/cli生成一個(gè)vue項(xiàng)目

npm install -g @vue/cli 個(gè)人不建議直接全局安裝，因?yàn)榭赡軙?huì)對(duì)其他項(xiàng)目造成影響，所以會(huì)選擇加上 -D 來(lái)進(jìn)行本地安裝

然后 vue create project-name （使用本地安裝的記得加上 npx ）

成功創(chuàng)建之后，我們看看當(dāng)前的目錄結(jié)構(gòu)

這里我們需要重構(gòu)一下我們的目錄讓他更可觀

配置vue.config.js

let path = require('path')
let glob = require('glob') // 用于篩選文件

// 工廠函數(shù) - 配置pages實(shí)現(xiàn)多頁(yè)面獲取某文件夾下的html與js
function handleEntry(entry) {
 let entries = {}
 let entryBaseName = ''
 let entryPathName = ''
 let entryTemplate = ''
 let applicationName = ''

 glob.sync(entry).forEach(item => {
  console.log('!!!', item)
  entryBaseName = path.basename(item, path.extname(item))
  console.log('entryBaseName:', entryBaseName)
  entryTemplate = item.split('/').splice(-3)
  console.log('entryTemplate:', entryTemplate)
  entryPathName = entryBaseName // 正確輸出js和html的路徑
  console.log('entryPathName', entryPathName)

  entries[entryPathName] = {
   entry: 'src/' + entryTemplate[0] + '/' + entryTemplate[1] + '/' + entryTemplate[1] + '.js',
   template: 'src/' + entryTemplate[0] + '/' + entryTemplate[1] + '/' + entryTemplate[2],
   title: entryTemplate[2],
   filename: entryTemplate[2]
  }
 })

 return entries
}

let pages = handleEntry('./src/applications/**?/*.html')
console.log(pages)

// 以下開始配置
module.exports = {
 lintOnSave: false, // 關(guān)掉eslint
 /**
  * baseUrl 從 3.3起廢用，使用pubilcPath代替
  * 默認(rèn)情況下，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上，例如 https://www.my-app.com/。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/，則設(shè)置 publicPath 為 /my-app/。
  * 這個(gè)值也可以被設(shè)置為空字符串 ('') 或是相對(duì)路徑 ('./')，這樣所有的資源都會(huì)被鏈接為相對(duì)路徑，這樣打出來(lái)的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應(yīng)用的文件系統(tǒng)中。
  */
 publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
 productionSourceMap: false,
 // 入口設(shè)置
 pages,
 devServer: {
  index: '/', // 運(yùn)行時(shí)，默認(rèn)打開application1頁(yè)面
  // 告訴dev-server在服務(wù)器啟動(dòng)后打開瀏覽器，將其設(shè)置true為打開默認(rèn)瀏覽器
  open: true,
  host: 'localhost',
  port: 8080,
  https: false,
  hotOnly: false,
  // 配置首頁(yè) 入口鏈接
  before: app => {
   app.get('/', (req, res, next) => {
    for (let i in pages) {
     res.write(`<a target="_self" href="/${i}">/${i}</a></br>`);
    }
    res.end()
   });
  }
 }
}

application1.js
import Vue from 'vue'
import Application1 from './application1.vue'
import router from './router'
import store from './vuex'

Vue.config.productionTip = false

new Vue({
 router,
 store,
 render: h => h(Application1)
}).$mount('#app')

application1.vue

<template>
 <div id="app">
  <a class='tips' href='application2.html'>
  Hello Im Application1,Clike me can go to Application2
  </a>
 </div>
</template>

<style lang="less">
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}

.tips{
 display: flex;
 justify-content: center;
 align-items:center;
 color:lightsalmon;
 font-size:20px;
 font-weight:bold;
}

</style>

application1.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 <title>Application1</title>
</head>

<body>
 <noscript>
  <strong>We're sorry but test-my-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
</body>

</html>

同理 application2應(yīng)用也這樣配置運(yùn)行

npm run serve

運(yùn)行