详解如何使用 vue-cli 开发多页应用       本篇文章主要介绍了详解如何使用 vue-cli 开发多页应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了如何使用 vue-cli 开发多页应用，分享给大家，具体如下：

修改的webpack配置文件

全局配置

修改 webpack.base.conf.js

打开 ~\build\webpack.base.conf.js ，找到entry，添加多入口

entry: {
 app: './src/main.js',
 app2: './src/main2.js',
 app3: './src/main3.js',

运行、编译的时候每一个入口都会对应一个Chunk

run dev 开发环境

修改 webpack.dev.conf.js

打开 ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

chunks: ['app']中的app对应的是webpack.base.conf.js中entry设置的入口文件

plugins:[
 // ampedandwired/html-webpack-plugin
 //  → app.js
 new HtmlWebpackPlugin({
 ',//生成的html
 ',//来源html
 inject: true,//是否开启注入
 chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源
 //  → app2.js
 new HtmlWebpackPlugin({
 ',//生成的html
 ',//来源html
 inject: true,//是否开启注入
 chunks: ['app2']//需要引入的Chunk，不配置就会引入所有页面的资源
 //  → app3.js
 new HtmlWebpackPlugin({
 ',//生成的html
 ',//来源html
 inject: true,//是否开启注入
 chunks: ['app3']//需要引入的Chunk，不配置就会引入所有页面的资源

run build 编译

修改 config/index.js

打开~\config\index.js，找到build下的index: path.resolve(__dirname, '../')，在其后添加多页

build: {
 index: path.resolve(__dirname, '../'),
 index2: path.resolve(__dirname, '../'),
 index3: path.resolve(__dirname, '../'),
},

修改 webpack.prod.conf.js

打开~\build\webpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中对应的 build

plugins: [
 //  → app.js
 new HtmlWebpackPlugin({
 filename: config.build.index,
 ',
 inject: true,
 minify: {
 removeComments: true,
 colla凡科抠图eWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // kangax/html-minifier#options-quick-reference
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 chunks: ['manifest','vendor','app']//需要引入的Chunk，不配置就会引入所有页面的资源
 //  → app2.js
 new HtmlWebpackPlugin({
 filename: config.build.index2,
 ',
 inject: true,
 minify: {
 removeComments: true,
 colla凡科抠图eWhitespace: true,
 removeAttributeQuotes: true
 chunksSortMode: 'dependency',
 chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就会引入所有页面的资源
 //  → app3.js
 new HtmlWebpackPlugin({
 filename: config.build.index3,
 ',
 inject: true,
 minify: {
 removeComments: true,
 colla凡科抠图eWhitespace: true,
 removeAttributeQuotes: true
 chunksSortMode: 'dependency',
 chunks: ['manifest','vendor','app3']//需要引入的Chunk，不配置就会引入所有页面的资源

如果页面比较多，可以考虑使用循环将 HtmlWebpackPlugin 添加到 plugins

// utils.js
exports.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.js ', '../src/views/')); pages.forEach(function (pathname) { // ampedandwired/html-webpack-plugin var conf = { ', //生成的html存放路径，相对于path ', //html模板路径 inject: false, //js插入的位置，true/'head'/'body'/false * 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题， * 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项， * 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。 * 为避免压缩html，需要在html-loader上配置'html -minimize'，见loaders中html-loader的配置。 // minify: { //压缩HTML文件 // removeComments: true, //移除HTML中的注释 // colla凡科抠图eWhitespace: 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.js
entry: {
 app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。