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)