vue项目如何配置开发、测试、生产，环境变量

1.在项目根目录下新建.env文件，文件内部如下：

VUE_APP_MY_NAME = '嘻嘻哈哈'
可在main.js中 打印 console.log(process.env.VUE_APP_MY_NAME, 'env') 即可获取到添加的VUE_APP_MY_NAME 变量
** 注意 ** 

.env 文件会在所有的环境中被载入

配置开发环境环境变量

1.新建.env.development文件

NODE_ENV = 'development'    //模式
NODE_BASE_URL = 'http://xxxxxxxxxx'   // 开发环境api地址
// 自定义环境变量(全部为大写，并且以VUE_APP开头)
VUE_APP_TEXT = '嘿嘿嘿嘿'

2.在package.json文件，scripts节点中添加

"test": "cross-env vue-cli-service serve --mode development"

3.在终端运行此脚本

可在main.js中 打印 console.log(process.env, 'env') 即可获取到配置的所有变量

配置测试环境环境变量

1.新建.env.test文件

NODE_ENV = 'test'    //模式
NODE_BASE_URL = 'http://xxxxxxxxxx'   // 开发环境api地址
// 自定义环境变量(全部为大写，并且以VUE_APP开头)
VUE_APP_TEXT = '嘿嘿嘿嘿'

2.在package.json文件，scripts节点中添加

"serve:test": "cross-env vue-cli-service serve --mode test"

3.在终端运行此脚本

可在main.js中 打印 console.log(process.env, 'env') 即可获取到配置的所有变量

配置测试生产环境变量

1.新建.env.production文件

NODE_ENV = 'production'    //模式
NODE_BASE_URL = 'http://xxxxxxxxxx'   // 开发环境api地址
// 自定义环境变量(全部为大写，并且以VUE_APP开头)
VUE_APP_TEXT = '嘿嘿嘿嘿'

2.在package.json文件，scripts节点中添加

"serve:prod": "cross-env vue-cli-service serve --mode production"

3.在终端运行此脚本

可在main.js中 打印 console.log(process.env, 'env') 即可获取到配置的所有变量