在做專案環境變數配置前,可以先到官網回憶一下環境變數的基本使用,https://cn.vitejs.dev/guide/e...
一、環境模式
首先環境變數是可以分模式的,常用模式如下:
.env # 所有情況下都會載入
.env.local # 所有情況下都會載入,但會被 git 忽略
.env.[mode] # 只在指定模式下載入
.env.[mode].local # 只在指定模式下載入,但會被 git 忽略
預設 dev
環境下使用 .env.development
環境變數配置,build
環境下使用 .env.production
,所以不需要在 package.json
中再指定模式了
"scripts": {
"dev": "vite --mode development", // --mode development可以省略,執行 npm run dev 自動指定
"build": "vue-tsc --noEmit && vite build --mode production", // --mode production可以省略,執行 npm run build 自動指定
"preview": "vite preview"
},
--mode
一般在其他特殊自定義下指定使用。
二、環境變數分類
2.1 預設環境變數
- import.meta.env.MODE: {string} 應用執行的模式
- import.meta.env.BASE_URL: {string} 部署應用時的基本 URL
- import.meta.env.PROD: {boolean} 應用是否執行在生產環境
- import.meta.env.DEV: {boolean} 應用是否執行在開發環境 (永遠與 import.meta.env.PROD相反)
2.2 應用級環境變數
以 VITE_
開頭,這樣會被vite處理,如下:
.env.developlent
VITE_API_URL=/api/
VITE_LOCATION_ORIGIN=http://localhost:3000/
另外自定義的環境變數,還需要在 env.d.ts
中宣告變數型別
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_TITLE: string
readonly VITE_API_URL: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
三、載入優先順序
模式覆蓋通用,如:在生產環境下,.env.production
中的同名環境變數會覆蓋 .env
中同名配置,其他同理
四、環境變數使用
Vite把環境變數通過 import.meta.env
暴露出來,在 .vue
中使用方式如下:
<script setup lang="ts">
console.log(import.meta.env)
</script>
但如果要在 axios 中使用就需要特別配置了,需要在 vite.config.js
中載入環境變數,我們可以像以下這種方式處理:
import { defineConfig, loadEnv } from 'vite'
// https://vitejs.dev/config/
export default ({ mode }) => defineConfig({
define: {
'process.env': loadEnv(mode, process.cwd())
},
}
這樣配置完成後就可以在 plugins 下 axios.ts 中使用了
const {
VITE_API_URL
} = process.env
const instance = axios.create({
baseURL: VITE_API_URL
});
export default instance