Vue开发中使用.env配置开发和生产环境中不同的变量
使用.env文件可以方便的配置开发调试环境和服务器正式部署的生产环境中使用两套不同的配置文件,以实现代码中不用来回切换要访问的api接口路径需求.官方文档https://cli.vuejs.org/zh/guide/mode-and-env.html创建.env文件在vue项目的根目录下分别创建.env.development和.env.production两个文本文件分别用于开发和生...
·
使用.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
,翻译过来应该是叫重音符
更多推荐
已为社区贡献7条内容
所有评论(0)