vue配置不同环境，不同命令即开发、测试、生产环境

首先 我们 想解决的问题是，在 开发环境，测试环境，正式环境等不同的环境下使用不同的变量，
如下：

默认是只有开发development（运行npm run dev ）和生产环境production（npm run build 默认打包就是production环境），现在要加test测试环境变量。

配置步骤如下：

1.我们借助 cross-env 插件跨平台地设置及使用环境变量

npm安装方式：npm i --save-dev cross-env

2.我们对config文件夹做配置，新建一个test.env.js（test:测试环境） 文件来配置我们的测试环境，

代码如下：（NODE_ENV 与 ENV_CONFIG的参数都是双引号包单引号，否则会报错，注意单词也不要写错哦!~）

3.同理配置prod.env.js（prod:生产环境）

4.配置dev.env.js（dev:本地测试）：跟pro.env和test.env同理，添加BASE_API地址就好了

5.在config - index.js文件里面新增如下代码：

6.修改build打包文件里面的webpack.prod.conf.js文件如下：

注意：这里的意思是：因为加入了test环境的js文件，所以就不能默认写死打包指向prod.env.js 生产环境了 ，所以通过拼接字符串指定环境 取到对应环境变量。
详细解释：

1. pocess.env.env_config取到的值是test或者prod。 （根据的是：打包 package.json中的scripts定义的不同的指令，对应不同的值）
   
2. 拼接字符串+‘Env’+ 拼接好后是 “testEnv” 或者“prodEnv” 字符串
3. 从build.js .找到拼好的字符换的key值，引入对应的环境js。（即上边提到的第5步）

7.修改打包文件 build - build.js 如下：

代码：

const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config + 'mode...')

8.修改package.json打包命令：

代码如下：（这里可以直接忽略build的配置）

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

9.axios请求的地方直接配置：
如果直接在不同环境里边定义环境变量，如api地址

那么使用的时候，直接 process.env.BASE_API，

同理可以自定义多个环境变量kek:value，取值方式都是process.env.key

const url = process.env.BASE_API;
axios.defaults.baseURL = url;

最后打包命令整理：

npm run build--test   //打测试环境的包
npm run build--prod   //正式环境
npm run build--dev   //本地开发环境 
npm run dev   //本地运行

参考文章：

https://blog.csdn.net/Amy_cloud/article/details/91873507?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control