公司使用vue-cli创建的vue项目在初始化时并没有做多页面配置，随着需求的不断增加，发现有必要使用多页面配置。看了很多vue多页面配置的文章，基本都是在初始化时就配置了多页面。而且如果使用这些实现，需要调整当前项目的目录结构，这点也是不能接受的。 最后，参考这些文章，在不调整当前项目目录结构实现了多页面的配置的添加。这里做下记录、总结，方便以后复用。如果还能有幸帮助到有同样需求的童鞋的话，那就更好了。
实现步骤添加新增入口相关文件;使用变量维护多入口；开发环境读取多入口配置；生产环境读取多入口配置；新增入口相关文件在src目录下新增一个page1文件夹，新建新页面的所需的相关文件(入口文件、HTML模板文件等)。我这边直接vue-cli初始化创建相关文件复制了一份到page1文件夹下。如下：
├─App.vue├─main.js├─page1.html // 这里模板文件名称需要与文件夹名称相同，方便输出模板读取├─router| └index.js├─components| └HelloWorld.vue├─assets| └logo.pngpage1/router/index.js需要对该页面的所有路由添加同文件夹名的公共路径，用于解析：
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/page1/components/HelloWorld' // 这里也需要留意Vue.use(Router)export default new Router({ mode: 'history', base: '/', routes: [ { path: '/page1/', redirect: '/page1/index' }, { path: '/page1/index', name: 'HelloWorld', component: HelloWorld } ]})使用变量维护多入口我们在项目目录下的build/utils.js的最后exports一个指定多入口的对象。如下：
// 这里，每个属性就是一个页面配置，指定该页面的入口文件// 如果需要添加，只需多增加一个属性// 属性名必和html模板文件名、目录名称相同exports.multipleEntrys = { page1: './src/page1/main.js'}之所以使用build/utils.js，是因为该文件在webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js都用导入。
开发环境读取多入口配置首先，在build/webpack.base.conf.js中，我们把上面定义的入口添加进entry配置：
entry: { app: './src/main.js', ...utils.multipleEntrys // entry添加该行 }然后，在build/webpack.dev.conf.js添加路径解析和多页面输出：
// 添加解析，将historyApiFallback的属性修改如下： historyApiFallback: { rewrites: [ // 将所有多入口遍历成路径解析项 ...((()=>{ let writes = [] for(let prop in utils.multipleEntrys){ // 使用属性名匹配为正则 // 这就是上面“需要对该页面的所有路由添加同文件夹名的公共路径”的原因 let reg = new RegExp(`^/${prop}/`) writes.push({ from: reg, // 使用属性名读取模板文件 // 这就是上面“模板文件名称需要与文件夹名称相同”的原因 to: path.posix.join(config.dev.assetsPublicPath, `${prop}.html`) }) } return writes })()), // 匹配所有路径一定要在最后，否则该匹配之后的项，不会被执行 { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') } ], }// 在已经的HtmlWebpackPlugin中添加chunks配置，否则默认页面会注入所有页面的js文件...plugins: [ ... new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, // 增加此行， // 'app'为默认入口名称，如果你的默认入口不是'app' // 则这里需要替换 chunks: ['manifest', 'vendor', 'app'] }) ...]...// 在`devWebpackConfig`定义之后，紧接着添加多页面输出：for(let prop in utils.multipleEntrys){ devWebpackConfig.plugins.push(new HtmlWebpackPlugin({ filename: `${prop}.html`, // html模板路径,使用属性名作为文件夹名称 // 这是新页面文件夹名称需要和多入口配置变量属性名相同的原因 template: `./src/${prop}/${prop}.html`, inject: true, chunks: ['manifest', 'vendor', prop], }))}最后，添加多页面相互跳转链接：
...