關(guān)于Vite環(huán)境變量的配置
在vite.config.js中首先在這個(gè)配置文件中我們是拿不到import.meta.env的 昂勉，只能通過(guò)process.env的方式拿到
新建一個(gè)load-env.ts
安裝dotenv幫助我們加載指定的環(huán)境變量 ，我們?cè)谀夸浵滦陆ㄈ缦聨讉€(gè)變量
.env,deveopmemt.env.prc.env.production.env.menarini
package.json 中 配置對(duì)應(yīng)的腳本
"scripts": {
"dev": "vite",
"dev:prc": "vite serve --mode prc",
"dev:menarini": "vite serve --mode menarini",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
}
npm i dotenv
import * as dotenv from "dotenv"
export interface ViteEnv {
VITE_URL: string;
VITE_BASE_URL: string;
VITE_ZIP_NAME: string;
}
// 通過(guò)dotenv配置 需要加載指定.env文件 這樣process.env打印到得就是對(duì)應(yīng)得文件了
// 這里的mode是我們啟動(dòng)時(shí)候的參數(shù) npm run dev:prc 得到的mode就是prc
export function loadEnv(mode: string): ViteEnv {
const ret: any = {};
// 在使用之前我們先指定加載哪個(gè)環(huán)境變量
dotenv.config({
path: `.env.${mode}` // .env.prc
});
for (const envName of Object.keys(process.env)) {
let realName = (process.env as any)[envName].replace(/\\n/g, "\n");
ret[envName] = realName;
// 向process.env上擴(kuò)展我們定義的VITE環(huán)境變量
process.env[envName] = realName;
}
return ret
}
const regExps = (value: string, reg: string): string => {
return value.replace(new RegExp(reg, "g"), "");
};
// 根據(jù)環(huán)境變量返回指定得proxy
export function createProxy(targetProxyUrl:string,baseUrl:string) {
return {
[`${baseUrl}`]: {
target: targetProxyUrl,
changeOrigin: true,
rewrite: (path: string) => regExps(path,`${baseUrl}`)
},
}
}
vite.config.ts
# mode是在這里拿到的
export default ({ command, mode }) => {}
import { loadEnv, createProxy } from "./src/utils/load-env"
const { VITE_URL, VITE_BASE_URL, VITE_ZIP_NAME } = loadEnv(mode)
# proxy部分
serve: {
port: 8999,
proxy: createProxy(VITE_URL, VITE_BASE_URL)
}
request.ts
在request.ts中我們可以通過(guò) import.meta.env 拿到我們?cè)诃h(huán)境變量文件中的定義的Vite變量
這樣在配置axios的時(shí)候
const baseURL = (import.meta.env.VITE_BASE_URL as string)
const service: AxiosInstance = axios.create({
baseURL,
timeout: 30 * 1000,
});
