關(guān)于Vite環(huán)境變量的配置

在vite.config.js中首先在這個配置文件中我們是拿不到import.meta.env的 ，只能通過process.env的方式拿到

新建一個load-env.ts

安裝dotenv幫助我們加載指定的環(huán)境變量 ，我們在目錄下新建如下幾個變量

• .env,deveopmemt
• .env.prc
• .env.production
• .env.menarini

package.json 中 配置對應(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;
}

// 通過dotenv配置 需要加載指定.env文件 這樣process.env打印到得就是對應(yīng)得文件了 
// 這里的mode是我們啟動時候的參數(shù) npm run dev:prc 得到的mode就是prc
export function loadEnv(mode: string): ViteEnv {
    const ret: any = {};
    // 在使用之前我們先指定加載哪個環(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中我們可以通過 import.meta.env 拿到我們在環(huán)境變量文件中的定義的Vite變量

這樣在配置axios的時候

const baseURL = (import.meta.env.VITE_BASE_URL as string)
const service: AxiosInstance = axios.create({
  baseURL,
  timeout: 30 * 1000,
});