首先 使用vue腳手架開發(fā)多頁應(yīng)用是比較特別的需求，無奈有需求就要有解決的方案辦法偎肃，之前寫過用vue-cli2.x改造生產(chǎn)多頁應(yīng)用的方法永票，現(xiàn)在想想應(yīng)該升級換代了扮宠。
本想自己配置一個多頁的開發(fā)配置給大家參考使用，看完源碼后發(fā)現(xiàn)@vue/cli#3.x已經(jīng)自帶了多頁配置了松靡。而且配置簡單方便包你一學(xué)就會简僧。
@vue/cli#3.x 源碼
下面開始升級改造配置
安裝使用 @vue/cli#3.x 版本的腳手架
npm install -g @vue/cli
# ......等待
vue create <project-name>
# 或者你也可以使用我已經(jīng)配置好的
init https://github.com/advsets/vue-multi-page.git <project-name>
# ......基礎(chǔ)選項配置，等待安裝包內(nèi)容
配置 vue.config.js
首先安裝 glob 包, 學(xué)習(xí)glob
npm install --save-dev glob
@vue/cli#3.x 文檔
配置 vue.config.js
const fs = require('fs')
const glob = require("glob")
// 簡單學(xué)習(xí) glob https://www.cnblogs.com/liulangmao/p/4552339.html
const pages = {}
let entries
try {
// 獲取相關(guān)入口
entries = glob('src/pages/*/main.js', {sync: true})
} catch (err) {
entries = []
throw err
}
// 格式化生成入口
entries.forEach((file) => {
const fileSplit = file.split('/')
const pageName = fileSplit[2]
let pageHtml = fileSplit.slice(0, 3).join('/') + '/index.html'
if (!fs.existsSync(pageHtml)) {
// 入口如果不配置直接使用 _default.html
pageHtml = fileSplit.slice(0, 2).join('/') + '/_default.html'
}
pages[pageName] = {
entry: file,
template: pageHtml,
filename: `${pageName}.html`
}
})
module.exports = {
pages,
... // ... 其他配置
}
相關(guān)目錄形式
目錄形式
編譯后得到目錄
編譯后
多頁配置注意事項
- 每個多頁入口單獨使用 router雕欺，store 等 牢記
- 公共組件不應(yīng)涉及業(yè)務(wù)操作岛马，如router-link，store 操作等
- 頁面訪問 http[s]://localhost/[pages].html （如果有index模塊服務(wù)器會自動定位index.html）
- 每個單頁其實就是一個獨立的模塊屠列，你可以視作每個單頁都是一個vue項目啦逆，只是使用了公共的 components
