Vue-cli 中使用环境变量

项目环境的划分

    1.开发环境

    2.测试环境

    3.生产环境

Vue-cli中的环境只有2中 1. 开发环境(npm run dev)  2.生产环境(npm run build), 所以我们要添加一个测试环境并且不同环境中的环境变量并不相同    

1. vue-cli 中的环境变量存放在 config 目录下的 dev.env.js 与 prod.env.js 所以添加一个 prod.env.test.js 并配置环境变量 SYSTEM_ENV 在生产环境  (prod.env)  与测试环境  (prod.env.test.js)  分别为 production 与 test , 代码如下：

1. config目录下的文件结构

config文件夹下目录结构

2. 在prod.env.js中添加环境变量SYSTEM_ENV并且值为production， prod.env.test.js的值为test , 代码如下

prod.env.js

prod.env.test.js

3. 在build目录下添加webapck.prod.test.conf.js文件 内容直接复制 webpack.prod,conf.js的内容并修改evn的引入路径(最直接，最暴力的使用方式)，并新建build.test.js 文件，并修改引用路径，代码如下：

webpack.prod.test.conf.js 修改的内容

build.test.js

4. 在package.json中添加新的打包命令 npm run build:test 代码如下：

package.json

5. 在项目中就可以直接通过 process.env.SYSTEM_ENV 来调用了