这是我参与新手入门的第1篇文章

场景描述：

项目中有好几个地方调用了支付的功能，在开发环境和测试环境中，支付金额需要修改为1分钱，在生产环境中则是真实金额，支付接口是统一封装的，只需要在调用之前判断是开发环境还是生产环境就可以了。那么就需要用到环境变量，记录一下解决的过程。

解决问题

请先简单阅读一下官方文档，了解一下概念

1. 根目录创建.env.development、.env.test、.env.production文件(开发、测试、生产)

2. 文件内容及字段说明

• NODE_ENV:可以设置为其他值，比如”test”,但是打包后的目录结构和”production”不一样，所以还是设置为”production”,通过”VUE_APP_MODE”变量来区分环境
• VUE_APP_MODE:线上测试环境
• VUE_APP_API_URL:api调用地址
• outputDir:打包生成的文件夹名称，默认是’dist’

.env.development内容

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://192.168.1.33:8008/api/'
复制代码

.env.test内容

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test
复制代码

.env.production内容

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
复制代码

3. 修改vue.config.js中的打包输入目录

4. 修改package.json文件

"test": "vue-cli-service build --mode test",//打包测试环境
"publish": "vue-cli-service build && vue-cli-service build --mode test",//测试和生产一起打包
复制代码

5. 修改我们自己的支付接口文件

6. 打包

运行npm run test或者npm run publish
test是测试环境的，dist是生产环境的。

7.其他说明
再次说明一下为什么是用 process.env.VUE_APP_MODE 来判断，而不是用 process.env.NODE_ENV ，如果我们在 .env.test 文件中把 NODE_ENV 设置为 test 的话，那么打包出来的目录结构是有差异的，差异如下图

案例

github_demo: github.com/ynzy/vue_en…