反向代理
vite 配置开发环境时，基本上是需要配置反向代理的。下面是我的反向代理最佳实践。
准备环境变量的类型
在 types/env.shim.d.ts 目录内新建文件：
针 env 常见环境变量的类型声明拓展
我们这里需要用三斜线表达式，全量导入 vite 的客户端类型声明。
并且对类型 ImportMetaEnv 做拓展。
typescript
/// <reference types="vite/client" />
interface ImportMetaEnv {
/**
* 应用端口
* @example
* "8080"
*/
VITE_app_port: `${number}`;
/**
* API 基础路径(代理前缀)
* @example
* "/dev-api"
*/
VITE_proxy_prefix: string;
/**
* API 地址。即接口请求最终的服务器地址。
* @example
* "https://pcapi-xiaotuxian-front-devtest.itheima.net"
*/
VITE_base_url: string;
/** 是否开启 Mock 服务 */
VITE_MOCK_DEV_SERVER: `${boolean}`;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}配置环境变量
在项目根目录下配置环境变量。
环境变量
bash
# https://www.cnblogs.com/jqynr/p/17326254.html
# 要配置开发环境
NODE_ENV='development'
# 应用端口
VITE_app_port = 8080
# 代理前缀
VITE_proxy_prefix = '/dev-api'
# 开发接口地址
VITE_base_url = 'https://pcapi-xiaotuxian-front-devtest.itheima.net'
# 是否启用 Mock 服务
VITE_MOCK_DEV_SERVER = false配置 vite
导入环境变量，然后使用。注意导入的环境变量直接使用都是字符串。
配置 vite 反向代理
typescript
import { type UserConfig, type ConfigEnv, loadEnv, defineConfig } from "vite";
/**
* 用全量导入的方式 获取类型
* 这些类型不能写成export导入的形式，会导致全局类型声明失效
*
* 也可以等效地用 三斜线表达式 实现全量导入
* <reference types="./types/env.shim.d.ts" />
*/
// @ts-ignore
import "./types/env.shim.d.ts";
// https://vitejs.dev/config/
export default defineConfig(function ({ mode }: ConfigEnv): UserConfig {
// 提供类型声明 便于得到使用提示
// @ts-ignore
const env = loadEnv(mode, process.cwd()) as unknown as ImportMetaEnv;
const VITE_proxy_prefix = env.VITE_proxy_prefix;
const VITE_APP_API_URL = env.VITE_base_url;
const VITE_app_port = env.VITE_app_port;
return {
server: {
// 应用端口
port: Number(VITE_app_port),
proxy: {
[VITE_proxy_prefix]: {
changeOrigin: true,
// 接口地址
target: VITE_APP_API_URL,
rewrite: (path) => path.replace(new RegExp("^" + VITE_proxy_prefix), ""),
},
},
},
};
});贡献者
ruan-cat