前端 cross-env 实现vue项目多环境打包

前言

以下是自己在项目中配置的流程步骤

1. npm安装cross-env模块

cnpm i --save-dev cross-env

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"

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: '"生产环境接口"'

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: '"测试环境接口地址"'
})

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

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

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

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

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

npm run build:test 

生产环境包

npm run build:prod 

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