.jpg)
官方提供的項(xiàng)目生成工具vue-cli沒有對(duì)多頁面webapp的支持，但是在實(shí)際的項(xiàng)目中，我們需要這樣的腳手架，參考了很多大牛的方法，本文提供了一種我的單頁面腳手架轉(zhuǎn)換為多頁面腳手架的方案，供大家參考。不好的地方也請(qǐng)大家指正。
準(zhǔn)備
使用vue-cli生成一個(gè)你需要的單頁面項(xiàng)目腳手架，然后我們就要開始我們的改裝工程了。
重構(gòu)過程
步驟一 改變目錄結(jié)構(gòu)
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
-
step1 在src目錄下面新建views文件夾,然后再views文件夾下新建index文件夾
-
step2 將src目錄下的main.JS和App.vue移動(dòng)到step1中的index文件夾下，并將main.js重命名為index.js
-
step3 將src目錄下的router文件夾移動(dòng)到step1中的index文件夾下，如果不使用router可以再index.js中注釋掉，我沒有使用，因?yàn)槲业拿總€(gè)頁面不是單頁面的應(yīng)用，不必要使用路由功能
-
step4 將根目錄下的index.html文件移動(dòng)到step1中的index文件夾下
步驟二 修改build下的配置文件
在生產(chǎn)環(huán)境下會(huì)分頁面打包獨(dú)有js文件，并抽取公共js，不會(huì)什么都打包成一坨。打包后文件目錄結(jié)構(gòu)也是比較清晰地。一下所有修改都在build文件夾下
step1 修改utils.js，增加兩個(gè)函數(shù)，一個(gè)用來獲取頁面多入口，一個(gè)用來輸入打包后的頁面，并注入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文件夾下，每個(gè)頁面下的index.js作為頁面入口，故每個(gè)頁面下都必須有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文件夾下的對(duì)應(yīng)每個(gè)頁面的html后綴文件，然后放入數(shù)組中 //如果想要更深的定制或者修改，建議大家看一下CommonsChunkPlugin //推薦一個(gè)基礎(chǔ)的 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這個(gè)屬性值的后面加上我們上面的方法，下面是代碼片段：
// 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這個(gè)屬性值的后面加上我們上面的方法，下面是代碼片段：
new CopyWebpackPlugin([{ from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] }]) ].concat(utils.htmlPlugin())
配置完成。正常啟動(dòng)項(xiàng)目即可。
相關(guān)推薦：
如何將 Vue-cli 改造成支持多頁面的history模式
.png)
