Vue根据不同的路由文件实现打包差异化

　　有些时候我们经常一个项目中开发不同的功能，有可能一个前端项目中夹杂着不同系统之间的需求，最后打包发布的时候经常会将与项目不相关的代码一同打包进去，实际来讲这种操作也是不严谨的。那有没有办法可以根据某些不同的配置来实现打包的结果不同呢？答案是肯定的。在介绍下边的方法之前，希望读者有一些关于webpack以及Vue router的概念和应用，废话不多说，开始介绍。

　　首先来讲webpack，webpack是一个模块打包器他会收集各个组件之间的依赖关系，并通过此依赖关系来将所有的js、css、jpg等等都打成一个一个的组件依赖。而在Vue中也是使用webpack来进行模块打包工作，那么在Vue中有没有明确的依赖关系描述呢？在Vue中的所有的跳转都是通过Vue router进行的，那是不是可以认为router拥有着组件之间的依赖关系。而router中跳转的关键是通过不同的router.js加载不同的*.Vue组件，而后通过别名或者path进行跳转。当然的在router中需要使用index.js文件来引入不同的router.js，由此Vue才可以正确的去寻找并去加载*.Vue文件。

　　既然知道了Vue是通过router中index.js文件去加载的，那么就意味着可以通过定义不同的index.js来实现打包差异化。但是，定义多个index.js虽然可行，打包的时候webpack又怎么会知道加载那个index.js文件呢？这时候就可以使用webpack中的一个内置组件NormalModuleReplacementPlugin来完成(NormalModuleReplacementPlugin的原理请自行GooGle)，首先，使用npm run build的时候Vue会去加载webpack.prod.conf.js文件，这时候就可以在webpack.prod.conf.js文件中使用NormalModuleReplacementPlugin，方法如下：

var appTarget = env.PROJ_NAME
 plugins: [
        new webpack.NormalModuleReplacementPlugin(/.*APP_TARGET\./,
            function (resourse) {
                var str = appTarget.replace("\"","").replace("\"","");
                resourse.request = resourse.request.replace(/APP_TARGET/, `${str}`);
            }),
]

　　这个组件的实际上是所有的xxxx.APP_TARGET后边的APP_TARGET替换为指定的字符，由此再去加载文件，其中env.PROJ_NAME是定义在prod.env.js中的一个标识，这样就可以通过定义在prod.env.js中的这个标识去寻找相对应的index_xxxx.js文件，进而实现打包差异化。比如，你需要A项目的代码，只需要将prod.env.js中的PROJ_NAME字段改为A

'use strict'
module.exports = {
  NODE_ENV: '"production"',
    PROJ_NAME:'"A"'
}

　　这样Vue就会去加载index_A.js，同理当你需要B项目代码的时候只需要将PROJ_NAME更改为B即可。

　　当决定使用以上方法的时候，在main.js文件中引入路由主文件就不可以像下边这样引用了

import router from './router/index.js'

　　要修改成

import router from './router/index_APP_TARGET.js'

　　这样引用router才会去动态加载并实现打包差异化，这时候用户需要在定义不同的index.js文件来实现不同的vue组件引用，比如

　　　　index_A.js

　　　　index_B.js

　　　　index_C.js

　　在上述条件都完成之后可以使用以下命令来验证打包结果　　

npm run build --report

　　注：npm run build --report 命令实际是对 webpack-bundle-analyzer的一个使用 webpack-bundle-analyzer是一个可视化资源分析工具 用户可以在其中查看资源的分布情况