vue2+webpack 和 vite+vue3 如何设置以及获取环境变量

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)