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中设置环境变量
在main.js中打印环境变量 process.env.VUE_APP_USERNAME
npm run serve 控制台输出环境变量
run serve 控制台输出环境变量
tip:环境变量是node.js编译,不支持热修改。若修改环境变量需要重启服务。