前端多环境打包配置

前言

虽然网上有很多类似教程，自己多次需要做多环境打包时候，在网上找了很多教程，都相对繁琐，有时候按流程走下来都会感觉懵逼，所以将自己尝试配置流程记录下来，方便日后使用

1. npm安装cross-env模块

cnpm i --save-dev cross-env

   
   

   
   
1

2. package.json文件中scripts添加如下

"build:test": "rimraf dist && cross-env NODE_ENV=testing ENV_CONFIG=test node build/build.js",
"build:prod": "rimraf dist && cross-env NODE_ENV=production ENV_CONFIG=prod node build/build.js"

   
   

   
   
1
2

3. config/prod.env.js文件更改如下（该文件vue-cli项目会默认生成）

NODE_ENV: '"production"',		// 对应package.json文件中build:prod的NODE_ENV的值
ENV_CONFIG: '"prod"',			//对应package.json文件中build:prod的ENV_CONFIG的值
BASE_URL: '"生产环境接口"'

   
   

   
   
1
2
3

4. config/test.env.js文件下添加如下（需要新建，该目录用来配置测试环境配置）

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',		// 对应package.json文件中build:test的NODE_ENV的值
  ENV_CONFIG: '"test"',			//对应package.json文件中build:test的ENV_CONFIG的值
  BASE_URL: '"测试环境接口地址"'
})

   
   

   
   
1
2
3
4
5

5. build/webpack.prod.config.js文件下添加（该文件有定义env，删除原本的，换成如下）

const env = require('../config/' + process.env.env_config + '.env')

   
   

   
   
1

6. 项目中的API请求地址使用process.env.BASE_URL引用，也就是config文件中定义的BASE_URL属性，类似如下

axios.defaults.baseURL = process.env.BASE_URL;

   
   

   
   
1

7. 命令行打包不同环境的包版本
测试环境包

npm run build:test 

   
   

   
   
1

生产环境包

npm run build:prod 

   
   

   
   
1

Tips: 如果在项目代码中需要针对打包环境做不同的逻辑处理，可以通过process.env.NODE_ENV来做判断