反向代理

vite 配置开发环境时，基本上是需要配置反向代理的。下面是我的反向代理最佳实践。

准备环境变量的类型

在 types/env.shim.d.ts 目录内新建文件：

针 env 常见环境变量的类型声明拓展

我们这里需要用三斜线表达式，全量导入 vite 的客户端类型声明。

并且对类型 ImportMetaEnv 做拓展。

/// <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;
}

配置环境变量

在项目根目录下配置环境变量。

环境变量

# 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 反向代理

import { type UserConfig, type ConfigEnv, loadEnv, defineConfig } from "vite";

/**
 * 用全量导入的方式 获取类型
 * 这些类型不能写成export导入的形式，会导致全局类型声明失效
 *
 * 也可以等效地用 三斜线表达式 实现全量导入
 * <reference types="./types/env.shim.d.ts" />
 */
import "./types/env.shim.d.ts";

// https://vitejs.dev/config/
export default defineConfig(function ({ mode }: ConfigEnv): UserConfig {
	// 提供类型声明 便于得到使用提示
	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), ""),
				},
			},
		},
	};
});