本文分步驟為大家介紹了基於vue cli重構多頁面腳手架過程,非常不錯,具有參考借鑒價值,需要的朋友參考下
官方提供的項目生成工具vue-cli沒有對多頁webApp的支持,但在實際的專案中,我們需要這樣的腳手架,參考了很多大牛的方法,這裡提供了一種我的單頁腳手架轉換為多頁面腳手架的方案,供大家參考。不好的地方也請大家指正。
準備
使用vue-cli產生你需要的單頁專案鷹架,然後我們就要開始我們的改裝工程了。
重構過程
步驟一改變目錄結構
步驟二修改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 }),
// 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' }),
new CopyWebpackPlugin([{ from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] }]) ].concat(utils.htmlPlugin())
以上是在vue中使用cli如何實現重構多頁面腳手架的詳細內容。更多資訊請關注PHP中文網其他相關文章!