Vue3中配置env环境变量

什么时候会用到这个呢,比如我们的后端开发有多名,很多时候需要切换调用不同人的接口地址,或者在打包的时候,需要指定环境中的后台接口地址,那么我们频繁修改代码,就很麻烦,这个时候,就可以提前编写好每个人或者每个后端对应的环境文件,启动的时候指定对应的文件即可

这里以开发环境和生产环境为例

  1. 首先定义两个env文件,格式为,.env.环境名,里边的内容格式为

变量必须以 VITE_ 为前缀才能暴露给外部读取

NODE_ENV = 'development'

VITE_APP_TITLE = '开发环境'

VITE_APP_BASE_API = '/dev-api'

VITE_SERVE = 'http://127.0.0.1'

2.在package.json的启动脚本中定义对应环境的配置,比如我在本地启动,希望启动的时候可以拿到development对应的环境变量,那么可以改为

//这里是启动命令,前边的名字dev:dev,无所谓 ,叫什么都可以,最主要的是后边的命令,--open就是启动的时候直接打开对应的网页,--mode就是指定对应的环境

"dev:dev": "vite --open --mode development ",

"dev:pro":"vite --open --mode production",

//那么打包命令就是下边这样,道理都是一样的,通过--mode指定对应的环境

"build:pro": "vue-tsc && vite build --mode production",

3.那么在启动后,或者通过对应环境打包后,我们在代码中任何ts或者js代码中就可以通过import.meta.env获取到对应的环境变量对象了

相关推荐
一 乐13 分钟前
个人理财系统|基于java+小程序+APP的个人理财系统设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·后端·小程序
wyzqhhhh22 分钟前
同时打开两个浏览器页面,关闭 A 页面的时候,要求 B 页面同时关闭,怎么实现?
前端·javascript·react.js
晴殇i22 分钟前
从 WebSocket 到 SSE:实时通信的轻量化演进
前端·javascript
网络点点滴24 分钟前
reactive创建对象类型的响应式数据
前端·javascript·vue.js
携欢32 分钟前
PortSwigger靶场之盲 SSRF(服务器端请求伪造)漏洞通关秘籍
前端·网络·安全·web安全
慧慧吖@40 分钟前
前端关于埋点
前端
universe_0144 分钟前
前端学习css
前端·css·学习
熊猫比分站1 小时前
[特殊字符] Java/Vue 实现体育比分直播系统,支持多端实时更新
java·开发语言·vue.js
腾讯云云开发1 小时前
小程序数据库权限管理,一看就会!——CloudBase新手指南
前端·数据库·微信小程序
多则惑少则明2 小时前
Vue开发系列——自定义组件开发
前端·javascript·vue.js