vue3--vite環境變數的配置

洛飞發表於2024-10-11
VueVite變數

在開發環境、測試環境、生產環境需要請求不同的介面，對應不同的資料。

因此，配置環境變數也尤為重要

第一：為專案根目錄開發、測試、生成（也可以加入預釋出）環境建立.env檔案

.env.development
.env.production
.env.test

第二：配置資料

# 變數必須以 VITE_ 為字首才能暴露給外部讀取
NODE_ENV = 'development'
VITE_APP_BASE_API = '/dev-api'
NODE_ENV = 'production'
VITE_APP_BASE_API = '/prod-api'
# 變數必須以 VITE_ 為字首才能暴露給外部讀取
NODE_ENV = 'test'
VITE_APP_BASE_API = '/test-api'

第三：package.json中配置執行命令

 "scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },

如下圖所示：

在任何的js程式碼中可以使用import.meta.env來訪問其中資料。

相關文章