利用 vue-cli 搭建的項目大都是單頁面應用項目,對於簡單的項目,單頁面就能知足要求。但對於有多個子項目的應用,若是建立多個單頁面,顯示有點重複,特別是 node_modules 會有多份相同的。若是所有放到單頁面項目下,又顯得有點亂,這時候經過改造 vue-cli 搭建的項目爲多頁面,就是一個比較好的解決方法。javascript
如何改造單頁面 vue.js 項目爲多頁面項目?下面是此次改造的具體過程。html
這裏直接使用官方提供的腳手架 vue-cli3 建立,具體的過程請參考 vue-cli3.0 升級記錄vue
在項目根路徑下( 與 package.json 同目錄 )添加 vue.config.js,內容以下:java
module.exports = {
pages: {
index: {
// 入口js的路徑
entry: './src/main',
// 頁面模板路徑
template: './src/public/index.html'
}
}
}
複製代碼
上面的配置其實就是 vue-cli 創建項目的默認配置,若是增長頁面,在 pages 節點下添加配置便可。但這種方式,每次增長一個新頁面,就須要手動添加節點,這種重複的事情顯然不智能。下面繼續改造。node
要自動化,那麼就須要按定一種規則把頁面組織下。如把全部路由頁面都放到 src/pages 目錄下,改造後的結構以下:vue-cli
在項目根路徑下( 與 package.json 同目錄 )添加 vue.util.js,內容以下:shell
const path = require('path')
const glob = require('glob')
const START_PATH = '/src/pages/'
const PAGE_PATH = path.resolve(__dirname, '.' + START_PATH)
exports.pages = function () {
var entryFiles = glob.sync(PAGE_PATH + '/**/*.html')
var obj = {}
entryFiles.forEach((filePath) => {
var dirPath = filePath.substring(0, filePath.lastIndexOf('/'))
var dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1)
var filename = filePath.substring(filePath.lastIndexOf(START_PATH) + START_PATH.length, filePath.lastIndexOf('/'))
if (filename.endsWith(dirName)) {
obj[filename] = {
entry: filePath.substring(0, filePath.lastIndexOf('.html')) + '.js',
template: filePath.substring(0, filePath.lastIndexOf('.html')) + '.html'
}
}
})
return obj
}
複製代碼
在 vue.config.js 使用上面的配置json
const utils = require('./vue.util')
module.exports = {
pages: utils.pages()
}
複製代碼
yarn dev
複製代碼
瀏覽器輸入:瀏覽器
http://localhost:8080/index.html 和 http://localhost:8080/index2.html測試
OK,多頁面配置完成