本文介紹了如何使用 vue-cli 開發(fā)多頁應(yīng)用，分享給大家，具體如下：
修改的webpack配置文件
全局配置
修改 webpack.base.conf.js
打開 ~/build/webpack.base.conf.js ，找到entry，添加多入口
entry: { app: './src/main.js', app2: './src/main2.js', app3: './src/main3.js',},運行、編譯的時候每一個入口都會對應(yīng)一個Chunk
run dev 開發(fā)環(huán)境
修改 webpack.dev.conf.js
打開 ~/build/webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加對應(yīng)的多頁，并為每個頁面添加Chunk配置
chunks: ['app']中的app對應(yīng)的是webpack.base.conf.js中entry設(shè)置的入口文件
plugins:[ // https://github.com/ampedandwired/html-webpack-plugin // 多頁:index.html → app.js new HtmlWebpackPlugin({ filename: 'index.html',//生成的html template: 'index.html',//來源html inject: true,//是否開啟注入 chunks: ['app']//需要引入的Chunk，不配置就會引入所有頁面的資源 }), // 多頁:index2.html → app2.js new HtmlWebpackPlugin({ filename: 'index2.html',//生成的html template: 'index2.html',//來源html inject: true,//是否開啟注入 chunks: ['app2']//需要引入的Chunk，不配置就會引入所有頁面的資源 }), // 多頁:index3.html → app3.js new HtmlWebpackPlugin({ filename: 'index3.html',//生成的html template: 'index3.html',//來源html inject: true,//是否開啟注入 chunks: ['app3']//需要引入的Chunk，不配置就會引入所有頁面的資源 })]run build 編譯
修改 config/index.js
打開~/config/index.js，找到build下的index: path.resolve(__dirname, '../dist/index.html')，在其后添加多頁
build: { index: path.resolve(__dirname, '../dist/index.html'), index2: path.resolve(__dirname, '../dist/index2.html'), index3: path.resolve(__dirname, '../dist/index3.html'),},修改 webpack.prod.conf.js
打開~/build/webpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加對應(yīng)的多頁，并為每個頁面添加Chunk配置
HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中對應(yīng)的 build
plugins: [ // 多頁:index.html → app.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', chunks: ['manifest','vendor','app']//需要引入的Chunk，不配置就會引入所有頁面的資源 }), // 多頁:index2.html → app2.js new HtmlWebpackPlugin({ filename: config.build.index2, template: 'index2.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就會引入所有頁面的資源 }), // 多頁:index3.html → app3.js new HtmlWebpackPlugin({ filename: config.build.index3, template: 'index3.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest','vendor','app3']//需要引入的Chunk，不配置就會引入所有頁面的資源 }),]如果頁面比較多，可以考慮使用循環(huán)將 HtmlWebpackPlugin 添加到 plugins
// utils.jsexports.getEntry = function(globPath, pathDir) { var files = glob.sync(globPath); var entries = {}, entry, dirname, basename, pathname, extname; for (var i = 0; i < files.length; i++) { entry = files[i]; dirname = path.dirname(entry); extname = path.extname(entry); basename = path.basename(entry, extname); pathname = path.join(dirname, basename); pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname; entries[pathname] = ['./' + entry]; } return entries;}// webpack.base.conf.jsvar pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));pages.forEach(function (pathname) { // https://github.com/ampedandwired/html-webpack-plugin var conf = { filename: '../views/' + pathname + '.html', //生成的html存放路徑，相對于path template: '../src/views/' + pathname + '.html', //html模板路徑 inject: false, //js插入的位置，true/'head'/'body'/false /* * 壓縮這塊，調(diào)用了html-minify，會導(dǎo)致壓縮時候的很多html語法檢查問題， * 如在html標(biāo)簽屬性上使用{{...}}表達式，所以很多情況下并不需要在此配置壓縮項， * 另外，UglifyJsPlugin會在壓縮代碼的時候連同html一起壓縮。 * 為避免壓縮html，需要在html-loader上配置'html?-minimize'，見loaders中html-loader的配置。 */ // minify: { //壓縮HTML文件 // removeComments: true, //移除HTML中的注釋 // collapseWhitespace: false //刪除空白符與換行符 // } }; if (pathname in config.entry) { conf.favicon = 'src/images/favicon.ico'; conf.inject = 'body'; conf.chunks = ['vendors', pathname]; conf.hash = true; } config.plugins.push(new HtmlWebpackPlugin(conf));});同樣入口 entry 也可以使用
// webpack.base.conf.jsentry: { app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')},以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
