vue-cli 实现多页面多入口 页面共享

---

本次业务场景：本在跑在钉钉上的一套H5,现在需要需要迁移的政务钉钉上，并且保留钉钉。因为更换了平台，所以关于钉钉的鉴权以及dd的ui以及方法需要对应变动，而具体的业务页面逻辑不需要改变。

---

方案：

1. 因为dd的配置和鉴权，被封装成了一个Vue plugin，通过入口中调用，类似这样：

import DDPlugin from './common/plugins/dd/index.js'
Vue.use(DDPlugin)

Vue.DD.getConfig().then(res => {
	 // getConfig 是封装的方法
	 // 设置dd需要加的组件初始化 dd.config
     // 获取钉钉配置
     // 进行授权
     // res 返回的 设备信息设置token
     new Vue()
).catch(err => alert(JSON.stringify(err)));

所以我们需要更换的只是DDPlugin 中具体的实现保证对外接口统一，就能实现将项目迁移到政务钉钉。

2. 上面已经说了，需要保留钉钉版本的，所以这个项目说是迁移，不如是说需要部署到另一个环境中，所以肯定不能简单的复制到一个新仓库进行开发，这样会导致后期需要维护两套业务逻辑一样的代码，双倍的不开心肯定是不能要的。

所以最好两个地方的页面是相同的，但是入口出的DDPlugin根据不同环境，动态配置，
1. 首先想到的是能否是用环境变量？因为是嵌入第三方，所以这个方案舍弃；
2. 其次是通过url传参，然后在不能地方嵌入不同的链接，根据参数加载不通的DDPlugin，这个方案是可行，已经测试过了，但是后来舍弃了，原因是，不同的场景肯定会导致不同的需求，如果这种，需要判断的地方会很多，最后会很乱，也会难以阅读；
3. 第三种方案是新增一个入口，然后在入口中进行加载不同的配置，也就是我们现在使用的这种。

---

实施：

1. 增加入口,在src文件中加indexV2.html和indexV2.js分别作为访问入口和js入口。
2. 但是vue项目默认配置中，只有一个入口，无论是dev环境还是开发打包，都只有按照一个配置去走，所以我们需要改webpack的配置
3. 首先修改dev环境。

webpack.dev.conf.js 文件配置页面和入口js。

  // 原始的单页面
  new HtmlWebpackPlugin({
     filename: 'index.html',
     template: './src/index.html',
     chunks: ['vendor', 'index'],
     env: 'dev',
     inject: true
   }),
   // 增加V2页面配置
   new HtmlWebpackPlugin({
       filename: 'indexV2.html',
       template: './src/indexV2.html',
       chunks: ['vendor', 'indexV2'],
       env: 'dev',
       inject: true
     }),

webpack.base.conf.js 增加入口js。

entry: {
   index: './src/index.js', // 原始
   indexV2: './src/indexV2.js' // 新增
 },

配置到这里，已经能在dev环境访问两套不一样的页面。
下面来改造indexV2.js（由index.js复制而来），替换引入的dd插件
···
import DDPlugin from ‘./common/plugins/dd/indexV2.js’
···
dd插件中如何提供一直的api就不细说了，这部分大家都会。

现在我们访问indexV2.html ,加载indexV2.js ，成功的将项目分为环境但是业务合一。

有的同学会问了，就改一行代码，直接用url参数判断一下不是更简单吗，搞这么多，你试试想想，如果这边需要新增一个单独页面，你是不是还要去router里面判断，如果这边要加个新业务，你是不是又要去判断。至于有些人同学还会问，会不会有这些问题，我只想说，你们自己的产品的你们还不清楚吗！！！！！！！！！！！！

所以说，我们通过这种方法，清晰的将两个项目分开，但是又将公共的部分可以统一维护。

5. 修改生产配置。

    new HtmlWebpackPlugin({
     filename: process.env.NODE_ENV === 'testing'
       ? 'index.html'
       : config.build.index,
     template: './src/index.html',
     chunks: ['manifest','vendor', 'index'],
     inject: true,
     hash: true,
     custom: '自定义',
     env: 'prod',
     chunksSortMode: 'dependency'
   }),

   new HtmlWebpackPlugin({
       filename: 'indexV2.html',
       template: './src/indexV2.html',
       chunks: ['manifest','vendor', 'indexV2'],
       inject: true,
       hash: true,
       custom: '自定义',
       env: 'prod',
       chunksSortMode: 'dependency'
     }),

ps：已上配置都是我经过简化的，其余参数匹配如果需要请自行根据项目进行增删，如果需要完全独立开，可以将公共js和css都进行分割，而我这里不需要我就没弄