Vue开发中使用.env配置开发和生产环境中不同的变量

使用.env文件可以方便的配置开发调试环境和服务器正式部署的生产环境中使用两套不同的配置文件,以实现代码中不用来回切换要访问的api接口路径需求.

官方文档

https://cli.vuejs.org/zh/guide/mode-and-env.html

创建.env文件

在vue项目的根目录下分别创建.env.development和.env.production两个文本文件分别用于开发和生产环境

.env.development文件内容如下:

VUE_APP_API_HOST=127.0.0.1

.env.production文件内容如下:

VUE_APP_API_HOST=10.41.56.121

注意.env中的变量名必须要以VUE_APP_开头

访问.env中的变量

比如在main.js中配置axios请求的根路径就可以写成这样

axios.defaults.baseURL = `http://${process.env.VUE_APP_API_HOST}:8000/`

注意上面使用了ES6中的格式化字符串语法,前后用的是和~按键输入的那个`符号

这样在本地使用yarn serve跑的测试服务器上就会访问.env.development中定义的变量,而在yarn build的时候又会使用.env.production中变量的内容.

番外篇

好奇这个~按键输入的反单引号(我先这么叫)叫啥名字,发现老外好像管它叫Grave accent,翻译过来应该是叫重音符