Vite中配置环境变量

关于Vite环境变量的配置

在vite.config.js中首先在这个配置文件中我们是拿不到import.meta.env的 ，只能通过process.env的方式拿到

新建一个load-env.ts

安装dotenv帮助我们加载指定的环境变量 ，我们在目录下新建如下几个变量

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

package.json 中 配置对应的脚本

  "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打印到得就是对应得文件了 
// 这里的mode是我们启动时候的参数 npm run dev:prc 得到的mode就是prc
export function loadEnv(mode: string): ViteEnv {
    const ret: any = {};
    // 在使用之前我们先指定加载哪个环境变量 
    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上扩展我们定义的VITE环境变量
        process.env[envName] = realName;
    }
    return ret
}
const regExps = (value: string, reg: string): string => {
    return value.replace(new RegExp(reg, "g"), "");
};

//   根据环境变量返回指定得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 拿到我们在环境变量文件中的定义的Vite变量

这样在配置axios的时候

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