Vue环境变量和模式

环境变量的作用：

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

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

模式：–mode

开发模式development 用于vue-cli-service serve
测试模式test 用于vue-cli-service test:unit
生产模式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中设置环境变量

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q4cVodPQ-1611831176017)(C:\Users\陈琳\AppData\Roaming\Typora\typora-user-images\image-20210128092500881.png)]$

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

在这里插入图片描述

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

run serve 控制台输出环境变量

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