武威市凉州区建设局网站,渭南专业做网站,建设银行北京市分行网站,网站创意设计方案什么时候会用到这个呢#xff0c;比如我们的后端开发有多名#xff0c;很多时候需要切换调用不同人的接口地址#xff0c;或者在打包的时候#xff0c;需要指定环境中的后台接口地址#xff0c;那么我们频繁修改代码#xff0c;就很麻烦#xff0c;这个时候#xff0c;…什么时候会用到这个呢比如我们的后端开发有多名很多时候需要切换调用不同人的接口地址或者在打包的时候需要指定环境中的后台接口地址那么我们频繁修改代码就很麻烦这个时候就可以提前编写好每个人或者每个后端对应的环境文件启动的时候指定对应的文件即可
这里以开发环境和生产环境为例
首先定义两个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获取到对应的环境变量对象了
