环境变量配置

不同环境需要有不同的环境配置，环境变量配置文件需要以.env开头，后跟具体环境，可自定义，默认有.env.development开发环境、.env.production生产环境，也可以自定义一些其他环境的配置文件，这里先在根目录创建三个配置文件：

.env.development文件：

# 项目本地运行端口号
VITE_PORT = 11564

# 开发环境读取配置文件路径
VITE_PUBLIC_PATH = /

# 开发环境代理
VITE_PROXY_API_PATH = /api

# 开发环境后端地址
VITE_BASE_API_PATH = ""

.env.production文件：

# 生产环境项目打包目录
VITE_OUTDIR = "dist"

# 生产环境项目打包路径
VITE_PUBLIC_PATH = /

# 生产环境后端地址
VITE_BASE_API_PATH = ""

.env.staging文件：

# 测试环境项目打包目录
VITE_OUTDIR = "stage"

# 测试环境项目打包路径
VITE_PUBLIC_PATH = /

# 测试环境后端地址
VITE_BASE_API_PATH = ""

在vite项目中，环境变量必须以VITE_开头，这里的变量都在.env文件中声明，还需要对它们做一些处理，在根目录下新建build/index.ts路由文件：

// 处理环境变量
const wrapperEnv = (envConf: Recordable): ViteEnv => {
  // 此处为默认值，无需修改
  const ret: ViteEnv = {
    VITE_PORT: 11564,
    VITE_OUTDIR: "",
    VITE_PUBLIC_PATH: "",
    VITE_PROXY_API_PATH: "",
    VITE_BASE_API_PATH: ""
  };

  for (const envName of Object.keys(envConf)) {
    let realName = envConf[envName].replace(/\\n/g, "\n");
    realName =
      realName === "true" ? true : realName === "false" ? false : realName;

    if (envName === "VITE_PORT") {
      realName = Number(realName);
    }
    ret[envName] = realName;
    if (typeof realName === "string") {
      process.env[envName] = realName;
    } else if (typeof realName === "object") {
      process.env[envName] = JSON.stringify(realName);
    }
  }
  return ret;
};

// 跨域代理重写
const regExps = (value: string, reg: string): string => {
  return value.replace(new RegExp(reg, "g"), "");
};

// 环境变量
const loadEnv = (): ViteEnv => {
  return import.meta.env;
};

export { wrapperEnv, regExps, loadEnv };

这里有两个类型声明未引入，是以全局类型声明的形式在这里使用，在根目录下创建一个types文件夹，用来存放全局的一些类型声明文件，在types文件夹内新建global.d.ts文件：


declare type Recordable<T = any> = Record<string, T>;
declare interface ImportMetaEnv extends ViteEnv {
  __: unknown;
}
declare interface ViteEnv {
  VITE_PORT: number;
  VITE_OUTDIR: string;
  VITE_PUBLIC_PATH: string;
  VITE_PROXY_API_PATH: string;
  VITE_BASE_API_PATH: string;
}

还需要修改tsconfig.json文件：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": false,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    // 新增
    "baseUrl": ".", 
    "paths":{
      "@/*": ["src/*"],
      "^/*": ["build/*"],
      "#/*": ["types/*"]
    },
    "allowJs": false,
    "types": ["node", "vite/client", "element-plus/global"],
    "typeRoots": ["./node_modules/@types/", "./types"],
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","vite.config.ts","build/*.ts", "types/*.d.ts",],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

修改vite.config.ts文件，增加types和build文件夹的别名配置：

resolve: {
  alias: {
    '@': pathResolve('src'),
    '^': pathResolve('build'),
    '#': pathResolve('types'),
  }
},

以上有了专门用于存放全局的类型声明文件的文件夹，可以将src/env.d.ts文件也放入该文件夹内管理

这里创建了3个环境变量文件，对应的package.json文件中的命令需要有修改：

"scripts": {
  "start": "cross-env vite --mode development",
  "stage": "rimraf stage && cross-env vite build --mode staging",
  "build": "rimraf dist && cross-env vite build --mode production",
  "preview": "vite preview"
},

这里用到了两个新的插件依赖，需要进行安装：

yarn add cross-env rimraf -D

此时再次运行项目，执行yarn start打开开发环境，项目能正常运行。环境变量的配置完成后，接下来需要对项目配置文件vite.config.ts文件进行修改。

kevin / 中后台管理系统

环境变量配置

简介

发行版

贡献者

近期动态

kevin / 中后台管理系统 .gitee-modal { width: 500px !important; }

环境变量配置

简介

发行版

贡献者

近期动态

搜索帮助

kevin / 中后台管理系统