vue cli 3.X (二) 环境变量篇

vue cli 3.X (二) 环境变量篇

一、环境变量应用场景

一个产品的前端开发过程中，一般会经历本地开发、测试、打包上线等过程，不同的环境可能需要不同的配置，比如接口地址、服务器地址、端口等等。

因此，可以使用环境变量来管理不同环境下使用的配置

二、四种方式的环境变量

所有的设置环境变量文件必须放到代码文件夹的根目录下

1、.env

配置所有情况下都用到的配置。理论上这个最没吊用，都用到的配置，还配置个毛。

2、.env.local

配置所有情况下都用到的配置，但是与1的区别是，这个这是本地有效，不会被git

3、.env.[mode]

配置对应某个模式下的配置。

.env.development:开发环境的配置

.env.production:打包环境的配置

4、.env.[mode].local

效果同2，不会被git

三、如何定义环境变量

在相应模式的配置文件里面，定义需要的环境变量，定义有格式要求;

如果是在src文件夹内使用，则必须要以VUE_APP_变量名称=value的形式，字符串也不用加引号“”。

如果是在webpack配置中使用，没什么限制，可以直接通过process.env.XXX来使用

四、如何使用环境变量

在src文件夹内，定义好后，通过process.env.VUE_APP_变量名，来使用。

在vue文件中，可以在data中定义个变量，将这个值传给变量