我们可以在项目根目录中的下列文件来指定环境变量：
.env
# 在所有的环境中被载入
.env.local
# 在所有的环境中被载入，但会被 git 忽略
.env.[mode]
# 只在指定的模式中被载入
.env.[mode].local
# 只在指定的模式中被载入，但会被 git 忽略
.env
# 在所有的环境中被载入
.env.local
# 在所有的环境中被载入，但会被 git 忽略
.env.[mode]
# 只在指定的模式中被载入
.env.[mode].local
# 只在指定的模式中被载入，但会被 git 忽略一个环境文件只包含环境变量的“键=值”对,并且必须以VUE_APP开始:VUE_APP
FOO=bar
//无效
VUE_APP_SECRET=secret
有效
FOO=bar
//无效
VUE_APP_SECRET=secret
有效模式
模式
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式： Vue CLI

development 模式用于 vue-cli-service serve

production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

test 模式用于 vue-cli-service test:unit


development 模式用于 vue-cli-service serveproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2etest 模式用于 vue-cli-service test:unit

了解模式以后，我们可以为对应环境设置相应的环境变量，比如：

为 production 设置 .env.production

为 development 设置 .env.development

*为一个特定模式准备的环境文件 (例如 .env.production ) 将会比一般的环境文件 (例如 .env ) 拥有更高的优先级
为 production 设置 .env.production为 development 设置 .env.development*为一个特定模式准备的环境文件 (例如 .env.production ) 将会比一般的环境文件 (例如 .env ) 拥有更高的优先级如果只需要在本地使用的话，可以在后面加入.local,比如 .env.local ,会git 忽略.env.local 在客户端侧代码中，可以使用 process.env.VUE_APP_* 获取应用process.env.VUE_APP_* 注：process.env.NODE_ENV，获取应用运行模式( "development" 、 "production" 或 "test" )注：process.env.NODE_ENV，获取应用运行模式( "development" 、 "production" 或 "test" )process.env.BASE_URL,应用基础路径( vue.config.js 中的 publicPath 选项)ps：下面看下浅谈vue中环境变量和模式的作用ps：下面看下浅谈vue中环境变量和模式的作用ps：下面看下浅谈vue中环境变量和模式的作用使用vue框架进行前端开发也有一段时间了，遇到的问题可以大致分为2类：开发问题，部署问题。开发方面的问题是最多的，也是大家经常会遇到的，但是部署的问题也不容小觑，一旦部署出错会造成严重的上线事故。开发和测试时调用后台接口的地址是和生产环境中不一样的，有些时候需要跳转到其他网页，也需要测试和生产环境跳转不同的页面。这些配置如果都用人工来维护，上测试环境注释掉生产的代码，上生产环境注释掉测试的代码，会很麻烦也很容易出错。所以有必要在一个入口进行控制，这就要用到vue框架中的环境变量和模式。在vue-cli3构建的项目中，项目根目录下创建.env.[模式]文件可以定义一种模式，在这个文件中定义的变量就是对应模式的环境变量。在本地启动项目默认是使用的development模式，使用build命令打包默认是使用的production模式。但是我们一般都会有一个测试环境，在我们打测试包和生产包的时候都是用的是production模式，所以需要定义一个环境变量来进行区分。我目前的做法是创建.env.development，.env.test，.env.production三个模式文件。env.development，.env.test，.env.production每个模式文件中有3个环境变量：NODE_ENV（对应当前模式的名称），VUE_APP_RUNTIME_ENV（对应当前环境的名称），VUE_APP_BASE_URL（当前环境向后台发请求的baseurl）。vue-cli3构建的项目中默认只有development模式和production模式，默认的NODE_ENV分别是development和production，很多配置也只依据NODE_ENV区分这2种模式，但是我们需要有3种模式。生产和测试的包应该是除了环江变量不同，其他都相同，所以同属production模式。用额外的VUE_APP_RUNTIME_ENV来区分production和test环境。定义完成之后，在项目中使用process.env.VUE_APP_RUNTIME_ENV即可访问到变量的值。process.env.VUE_APP_RUNTIME_ENVpackage.json中也需要定义一条打测试包的命令：
"build-test": "vue-cli-service build --mode test"
"build-test": "vue-cli-service build --mode test"表示打一个使用测试配置的身生产包。