1.vue2+webpack
首先在package.json同级目录下新建.env.dev 和.env.pro(名字可以自己随便取这里为了简便就直接取.dev和.pro)
在相应的文件中设置你在不同环境下要使用的变量;例如
NODE_ENV='pro' VUE_APP_URL='https/pro'
然后在package.json中设置我们启动和打包项目的命令时获取的是哪个文件下的变量
"scripts": { "serve": "vue-cli-service serve --mode dev", //运行在本地的项目的是开发环境 获取的是.dev中的变量 "serve-pro":"vue-cli-service serve --mode pro", //运行在本地的项目是生产环境 获取的是.pro中的变量 "build-dev": "vue-cli-service build --mode dev",//打包的项目的是测试环境 获取的是.dev中的变量
"build-prod": "vue-cli-service build --mode pro", "lint": "vue-cli-service lint" },//打包的项目的是正式环境 获取的是.pro中的变量"lint": "vue-cli-service lint" },
console.log('当前环境是:',process.env.NODE_ENV)//就是根据你启动或者打包的命令获取对应的配置文件中的变量
2.vite+vue3
配置内容和webpack+vue2差不多;
注意:
1.就是配置文件中的变量不能随便命名,必须以VITE_开头
2.就是获取的方式使用:import.Meta.env.VITE_SOME_KEY 可以输出对应的值
console.log(import.Meta.env.VITE_SOME_KEY)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。