VUE 中利用.env文件定义全局变量

在平时的vue开发中，我们可能在多个页面用到同一个字段，或者是网页的根路径，直接写在代码里面不便于维护，后续修改的时候，也需要修改到很多的页面，于是我们就想有没有一种办法可以定义一个全局的变量，在各个vue文件里面可以直接用，本篇文章讲的就是如何利用.env文件来定义全局的变量。

1、什么是.env文件？

在vue项目中，env是全局配置文件，可以存储不同环境下的变量。使用vue-cli搭建项目，默认会在根目录创建一个.env文件，

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

mode的值可为development（开发环境）、production（生产环境）、test（测试环境），同时他们只在对应的模式下被载入。

2、配置.env文件

我们在.env文件中配置全局变量，需要以键值对的形式去定义，比如

VUE_APP_BAIDU_URL='www.baidu.com'

并且变量的命名需要以VUE_APP_ 开头，否则在后续的变量获取中得到的是undefined。

VUE_APP_TEST_SUCCESS='www.baidu.com' //正确
APP_TEST_SUCCESS='www.baidu.com' //错误
TEST_SUCCESS='www.baidu.com' //错误

注意：.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

3、vue获取全局变量

.env文件中设置了变量 VUE_APP_BAIDU_URL='www.baidu.com' ，

vue中只需要使用process.env.VUE_APP_BAIDU_URL就可以取到。不需要导入其他包，非常便利。

​