Vue环境变量和模式

Vue环境变量和模式

环境变量的作用：

开发和测试时调用后台接口的地址是和生产环境中不一样的，有些时候需要跳转到其他网页，也需要测试和生产环境跳转不同的页面。这些配置如果都用人工来维护，上测试环境注释掉生产的代码，上生产环境注释掉测试的代码，会很麻烦也很容易出错。这些配置如果都用人工来维护，上测试环境注释掉生产的代码，上生产环境注释掉测试的代码，会很麻烦也很容易出错。所以有必要在一个入口进行控制，这就要用到vue框架中的环境变量和模式。

---

参考官方: https://cli.vuejs.org/zh/guide/mode-and-env.html vue模式和环境变量

---

模式：–mode

1. 开发模式development 用于vue-cli-service serve
2. 测试模式test 用于vue-cli-service test:unit
3. 生产模式production 用户vue-cli-service build

---

环境变量：

在本地启动项目默认是使用的development模式，使用build命令打包默认是使用的production模式。但是我们一般都会有一个测试环境，在我们打测试包和生产包的时候都是用的是production模式，所以需要定义一个环境变量来进行区分。

创建环境文件

你可以在你的项目根目录中放置下列文件来指定环境变量：

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

一个环境文件只包含环境变量的“键=值”对：

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

在文件.env中设置环境变量

在main.js中打印环境变量 process.env.VUE_APP_USERNAME

npm run serve 控制台输出环境变量

run serve 控制台输出环境变量

tip:环境变量是node.js编译，不支持热修改。若修改环境变量需要重启服务。