vue 2分环境打包以及优化

在项目开发中，我们往往需要区分开发版、测试版、pre版、prod版，如果每次打包前都要去修改API地址就太麻烦了，那么如何根据不同的环境打包呢？

---

1、安装cross-env

 npm i --save-dev cross-env

2、修改各环境下的参数

1）在config文件夹下新建pre.env.js和test.env.js文件

2）修改prod.env.js文件的内容

'use strict'

module.exports = {   

     NODE_ENV: '"prod"',    

    BASE_URL: '"http://www.aaa.com/prod"'   // 这里写生产环境地址 

 }   

3）修改pre.env.js文件的内容

'use strict'

module.exports = {    

   NODE_ENV: '"pre"',     

  BASE_URL: '"http://www.aaa.com/pre"'   // 这里写预上线环境地址 

 }   

4）修改test.env.js文件内容

'use strict'

module.exports = {     

    NODE_ENV: '"test"',      

    BASE_URL: '"http://www.aaa.com/test"'   // 这里写测试环境地址  

}  

5）修改dev.env.js文件内容，让其去合并测试环境的url

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./test.env')    // 将此处的./prod.env修改为./test.env 

// 合并测试上的，不用写东西

module.exports = merge(prodEnv, {

     NODE_ENV: '"development"'

})

6）修改webpack.prod.conf.js文件

   将const env = require('../config/prod.env')改为如下：

const nodeEnv = process.env.NODE_ENV

const env = require(`../config/${nodeEnv}.env`)

7）修改build.js文件

    将process.env.NODE_ENV = 'production'改为如下：

const nodeEnv = process.env.NODE_ENV

    将const spinner = ora(‘production’)改为：

let text = ''

switch (nodeEnv) {

case 'prod' :

  text = {

    color: 'green',

    text: '正在为生产环境打包.......'

  }

break;

case 'pre' :

  text = {

    color: 'blue',

    text: '正在为预上线环境打包.......'

  }

break;

case 'test' :

  text = {

    color: 'red',

    text: '正在为测试环境打包.......'

  }

}

const spinner = ora(text)

8）修改 package.json文件

"scripts": {

   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

   "start": "npm run dev", "lint": "eslint --ext .js,.vue src",

   "build:prod": "cross-env NODE_ENV=prod node build/build.js",

   "build:dev": "cross-env NODE_ENV=test node build/build.js",

   "build:pre": "cross-env NODE_ENV=pre node build/build.js"

},

到此，执行不同的打包命令可以了。

打包配置好之后，还需要对项目进行进一步的优化，如使用CDN资源和gzip压缩

1.使用CDN资源

使用CDN在index.html文件中引入（我用的是BootCDN）

修改build/webpack.base.conf.js文件

module.exports = {

    // CDN

    externals: { 

        'vue': 'Vue',

         'vue-router': 'VueRouter', 

        'vuex': 'Vuex',

         'element-ui':'ELEMENT', 

        'axios':'axios'

    }

}

最后将main.js文件中的引入注释掉，个人测试了一下，不注释掉的话，打包体积也是会缩小的，因为打包生产环境时，运行的是webpack.base.conf.js这个文件中的配置，所以不会把CDN引入的那些依赖打包进去（如果不注释掉的话，个人觉得应该保证CDN引入的版本和npm安装的版本号一致，以免生产环境中出现问题不好排错）

2.gzip压缩

vue-cli生成的项目会自动配好相关的设置，只需我们开启就可以了，找到config/index.js文件

productionGzip: true, // 默认是false，改为true

如图：

config/index.js

打开build/webpack.prod.conf.js文件，找到如下图代码，发现如果开启gzip压缩，还需要安装compression-webpack-plugin

build/webpack.prod.conf.js

所以我们来安装下compression-webpack-plugin，直接安装可能会出现版本冲突的报错，建议安装低版本的，执行如下命令：

npm i -D [email protected]

到此，前端的gzip配置就完成了，当然还得修改服务器的配置

3. 打包之后出现一些map文件，不想要怎么办？

首先介绍下map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

如果觉得不需要这些map文件，可以找到config/index.js,进行如下修改（看个人项目需要）

productionSourceMap: false    // 默认是true

github地址：Avery_G

（注：每一篇文章都会对应有demo，已上传到个人github）