這次帶給大家vue cli單頁面腳手架轉換多頁面腳手架的方法，vue cli單頁面腳手架轉換多頁面腳手架的注意事項有哪些，下面就是實戰案例，一起來看一下。
官方提供的專案產生工具vue-cli沒有對多頁面webApp的支持，但是在實際的專案中，我們需要這樣的腳手架，參考了很多大牛的方法，這裡提供了一種我的單頁腳手架轉換為多頁腳手架的方案，供大家參考。不好的地方也請大家指正。
準備
使用vue-cli產生一個你需要的單頁專案鷹架，然後我們就要開始我們的改裝工程了。
重構過程
步驟一 改變目錄結構
# step1 在src目錄下面新建views資料夾,然後再views資料夾下新建index資料夾
# step2 將src目錄下的main.js和App.vue移到step1中的index資料夾下，並將main.js重新命名為index.
step3 將src目錄下的router資料夾移到step1中的index資料夾下，如果不使用router可以再index.js中註解掉，我沒有使用，因為我的每個頁面不是單一頁面的應用，不必要使用路由功能
# step4 將根目錄下的index.html檔案移到step1中的index資料夾下
# 步驟二 修改build下的設定檔
在生產環境下會分頁面打包獨有js文件，並抽取公共js，不會什麼都打包成一坨。打包後檔案目錄結構也是比較清晰。一下所有修改都在build資料夾下
step1 修改utils.js，增加兩個函數，一個用來取得頁面多入口，一個用來輸入打包後的頁面，並註入js:
var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//获取views文件夹下，每个页面下的index.js作为页面入口，故每个页面下都必须有index.js
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
var map = {}, tmp = [], pathname = '';
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
tmp = filePath.split('/').splice(-4)
map[tmp[2] + '/' + filename] = filePath
})
return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件，然后放入数组中
//如果想要更深的定制或者修改，建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let jsPath = '', tmp = [];
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
tmp = filePath.split('/').splice(-4)
jsPath = tmp[2] + '/' + 'index'
let conf = {
template: filePath,
filename: filename + '.html',
chunks: ['manifest', 'vendors', jsPath],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码，将其注释掉：
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),在plugins這個屬性值的後面加上我們上面的方法，下面是程式碼片段：
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
new FriendlyErrorsPlugin()
].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码，注释掉：
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),在plugins這個屬性值的後面加上我們上面的方法，下面是程式碼片段：
new CopyWebpackPlugin([{
from: path.resolve(dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}])
].concat(utils.htmlPlugin())配置完成。正常啟動專案即可。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#vue路由在history模式下刷新時渲染頁面無反映的處理方法
以上是vue+cli單頁面鷹架轉換多頁面鷹架的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
