目录Vue-cli 环境变量 process.env使用vue-cli配置环境变量process.env.xxx总结vue-cli 环境变量 process.env使用 参考官网:&
参考官网: https://cli.vuejs.org/zh/guide/mode-and-env.html#在客户端侧代码中使用环境变量
话不多说直接看代码
在package中的配置如下图
举个本地运行的例子.env.serve;
注意:
除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量:
NODE_ENV=development
VUE_APP_CURRENTMODE=serve
VUE_APP_BASEURL=Http://clife.ngrok.i84.com.cn
VUE_APP_BASEapi=http://clife.ngrok.i84.com.cn/
运行 yarn serve在模式下,然后就可以使用当中的全局变VUE_APP_BASEURL
mounted() {
let baseUrl = process.env.VUE_APP_BASEURL;
console.log(baseUrl)
}
结果如下
测试test --> VUE_APP_BASEAPI 为“/”的好处是在切换环境的接口请求直接为当前域名
//该配置为打包到测试服的配置
//该配置保留vconsole插件功能
NODE_ENV=production
VUE_APP_CURRENTMODE=test
VUE_APP_BASEURL=http://clife.ngrok.i84.com.cn
VUE_APP_BASEAPI=/
production -->VUE_APP_BASEAPI 为“/”的好处是在切换环境的接口请求直接为当前域名
//该配置为打包上正式环境配置
NODE_ENV=production
VUE_APP_CURRENTMODE=production
VUE_APP_BASEAPI=/
官方解释
模式和环境变量 | Vue CLI
自己新建.env.xxx
然后在package.JSON中,--mode对应.env.xxx的xxx
而.env.test比较特殊,默认NODE_ENV为development,打包时视作单元测试,不会打出CSS和图片文件,解决办法是可以强行指定为production
使用方法
process.env.xxxx
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue-cli环境变量process.env的使用及说明
本文链接: https://www.lsjlt.com/news/174512.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0