本文介紹了如何使用 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，不配置就會引入所有頁面的資源  }),]