vue中的环境变量

vue中的环境变量 (vue-cli2 / vue-cli3)

第一种： vue-cli2

配置一个运行时的环境

1.1在config目录下新建环境变量

config目录下存放的是env环境变量js文件，新建一个自己的环境变量文件如dev_01.env.js。内容如下：

'use strict'
module.exports = {
  NODE_ENV: '"dev"',
  BASE_SERVER_URL: '"这是一个dev_01环境的地址"'
}

对象以键值对的方式存放，值为单引号引用的字符串，自己命名

1.2 在build文件夹下新建webpack文件

在build文件夹下新建一个名为webpack.dev-test.conf.js的文件，该文件复制于自带的编译文件webpack.prod.conf.js。

2. 配置一个打包环境

2.1 在config目录下新建环境变量

config目录下存放的是env环境变量js文件，新建一个自己的环境变量文件如prod-test.env.js。内容如下

'use strict'
module.exports = {
  NODE_ENV: '"pro"',
  BASE_SERVER_URL: '"这是一个prod-test环境的地址"'
}

对象以键值对的方式存放，值为单引号引用的字符串，自己命名

2.2 在build文件夹下新建webpack文件

2.3 在build文件夹下创建build文件

第二种： @vue/cli3 vue cli 3.X (二) 环境变量篇

官网 vue cli3

写法： 
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

总结

vue-cli2的多环境配置比vue-cli3要复杂。需要在config和build文件夹中添加js文件配置。而vue-cli3只需要在根目录配置.env文件，并且在package.json文件中配置编译命令即可。