一、环境变量应用场景

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

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

二、四种方式的环境变量

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

  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中定义个变量,将这个值传给变量

posted on 2019-06-21 19:00  小湾生产队队长  阅读(1091)  评论(0编辑  收藏  举报