Vite中配置環(huán)境變量器联，與Vue2.0類似蓬豁，都是通過.env文件來實現的陵珍》歉停可以通過Vite官方文檔先大致了解下環(huán)境變量。下面我們會講解如何配置和使用環(huán)境變量酬凳。
一惠况、配置
項目根目錄中創(chuàng)建 .env.development與 .env.production文件，分別對應開發(fā)和生產環(huán)境宁仔。
文件內容如下：
// 開發(fā)環(huán)境
VITE_APP_BASE_API = "http://development.cn/"
VITE_APP_TITLE = "[dev]頁面標題"
// 生產環(huán)境
VITE_APP_BASE_API = "http://production.cn/"
VITE_APP_TITLE = "頁面標題"
當執(zhí)行npm run dev時稠屠，會獲取 .env.development中的變量作為環(huán)境變量，npm run build則會獲取.env.production台诗。
如何增加多環(huán)境配置？
有時候我們需要通過CI發(fā)布到多種不同的環(huán)境進行測試赐俗、演示拉队，那么我們該如何增加配置環(huán)境呢？只要根據規(guī)則在根目錄增加對應的變量文件阻逮，并在package.json中填寫對應的命令即可粱快，具體步驟如下：
- 新增
.env.testa
// 測試環(huán)境A
VITE_APP_BASE_API = "http://testa.cn/"
VITE_APP_TITLE = "[testa]頁面標題"
-
package.json中增加對應命令
{
"name": "myProject",
// ...
"scripts": {
"dev": "vite",
// "dev": "vite --mode testa ", // 也可以在本地開發(fā)時使用testa的環(huán)境變量
"build": "vite build",
"build:testa": "vite build --mode testa", // 關鍵是這里的 --mode testa
"preview": "vite preview"
}
//...
}
接下來我們執(zhí)行npm run build:testa就可以構建出基于.env.testa文件的產物了。
注意：為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_為前綴的變量才會暴露給經過 vite 處理的代碼事哭。如果你想修改前綴漫雷，請參考官方文檔教程。
二鳍咱、 實際應用
加載的環(huán)境變量會通過 import.meta.env 暴露給客戶端源碼降盹。
aixos配置baseURL
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_URL, // http://development.cn/
timeout: 5000
})
.vue 文件中使用
為了方便在vue文件中使用，我們可以在main.js中將它掛載到Vue實例上谤辜。
import App from './App.vue'
Vue.prototype.$env = import.meta.env
demo.vue
<!-- [dev]頁面標題 -->
<div>{{ $env.VITE_APP_TITLE }}</div>
頁面中使用
有時候我們需要在html文件中使用環(huán)境變量蓄坏，此時，我們需要借助插件vite-plugin-html來實現丑念。
安裝：
npm i vite-plugin-html -D
配置vite.config.js：
import { defineConfig, loadEnv } from 'vite'
import { createHtmlPlugin } from "vite-plugin-html";
const getViteEnv = (mode, target) => {
return loadEnv(mode, process.cwd())[target];
};
export default defineConfig({
plugins: [
createHtmlPlugin({
inject: {
data: {
title: getViteEnv(mode, "VITE_APP_TITLE")
},
},
}),
// ...
]
})
在index.html中使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- title %></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
關于該組件的具體參數配置涡戳，詳見官方說明。
