vue3-vite 設置環境變量和模式

一、設置模式

在package.json 中設置模式

  "scripts": {
    "dev": "vite --mode development",
    "build:beta": "vite build --mode beta",
    "build:release": "vite build --mode release",
    "serve": "vite preview"
  },

--mode 后為執行是對應的模式

二、新建對應模式的環境文件以及環境變量

.env.[模式名]

例如: .env.development    //在development模式下會讀取該文件

# just a flag
ENV = 'development'

# base api
VITE_BASE_API='http://localhost/api'

VITE_LOGIN_URL= 'http://localhost:8080/#/login'

VITE_PUBLIC_PATH = ''

# version
VITE_VER_MAIN = '1'
VITE_VER_SUB  = '0.0'
VITE_VER_STATE = 'dev'

//環境變量需要以  VITE_  開頭 (只有以 VITE_ 為前綴的變量才會暴露給經過 vite 處理的代碼)

三、在代碼中使用對應的環境變量

Index.vue

<script>
export default {
  name:"Index",
  setup(){
    const ENV = import.meta.env
    console.log('ENV',ENV);//獲取環境變量
  }
}
</script>

 

 

參考鏈接:Vite官方文檔-環境變量和模式