vue-vben-admin 解析五之 vite.config.ts 分析（2）

初学vue3-demo:https://github.com/Miofly/vue3-vite-vuex-demo

继续分析 vite.config.js

 return {
	// 项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。
	root,
	// 开发或生产环境服务的公共基础路径  : 绝对 URL 路径名，例如 /foo/  : 完整的 URL，例如 https://foo.com/  : 空字符串或 ./（用于开发环境）
	base: VITE_PUBLIC_PATH,
    resolve: {
	  // 文件系统路径的别名
      alias: [
        {
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },
        // /@/xxxx => src/xxxx
        {
          find: /\/@\//,
          replacement: pathResolve('src') + '/',
        },
        // /#/xxxx => types/xxxx
        {
          find: /\/#\//,
          replacement: pathResolve('types') + '/',
        },
      ],
    },
    server: {
      // 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 将监听所有地址，包括局域网和公网地址。true ===> 监听所有本地 IP host: '0.0.0.0',
	  host: true,
// 指定开发服务器端口。注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口，所以这可能不是开发服务器最终监听的实际端口。
	  port: VITE_PORT,
	  // 在开发服务器启动时自动在浏览器中打开应用程序
      open: true,
      // 从 .env 加载代理配置
      proxy: createProxy(VITE_PROXY),
    },

关于 alias 的配置，由于作者是从 vite1 的版本迁移过来所以和 webpack 的 alias 配置 src 的别名有所不同，会带上 /@

所以要采用和 webpack 常用的 src 配置，可写如下的代码

alias: [
	{
		find: '@',
		replacement: pathResolve('./src') + '/'
	},
	{
		find: '#',
		replacement: pathResolve('types') + '/'
	}
],

关于 proxy: createProxy(VITE_PROXY) 详解如下

/**
 * .env.development 的 代理配置
 */
import type { ProxyOptions } from 'vite';
/** 第一项被代理的 api 地址，第二项代理的 url 路径 */
type ProxyItem = [string, string];
/** 方法接收的参数 */
type ProxyList = ProxyItem[];
/**
 * @description Vite 代理所接收对象类型
 * @author wfd
 * @date 2021/10/9 14:08
 * @example
   使用 record 包含表示每一个对象的 key 的类型都是 string
   value 的类型为 ProxyOptions 联合上下面的属性
   { rewrite: (path: string) => string }
   此属性表示新增一个 rewrite 属性，rewrite 是一个函数接受一个 字符串 path 参数，最后返回一个字符串

   最新的 ProxyOptions 中已经包含了上述属性
 */
type ProxyTargetList = Record<string, ProxyOptions>;
// type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>;
/**  https 类型的 URL 的匹配正则 */
const httpsRE = /^https:\/\//;

/**
 * @description 生成 Vite 的 proxy 代理配置的方法
 * @author wfd
 * @date 2021/10/8 15:02
 * @example
 * list = [
      [ '/basic-api', 'http://localhost:3000' ],
      [ '/upload', 'http://localhost:3300/upload' ]
   ]
 * @param list 传入的代理对象数组
 */
export function createProxy (list: ProxyList = []) {
	const ret: ProxyTargetList = {};

	/**
	 * @description [prefix, target] 相当于每一个 item 如： [ '/basic-api', 'http://localhost:3000' ]
	 */
	for (const [prefix, target] of list) {
		// 判断是否为 https 类型的地址
		const isHttps = httpsRE.test(target);

		// https://github.com/http-party/node-http-proxy#options
		ret[prefix] = {
			// 要被代理的目标 url
			target,
			// 是false：请求头中host仍然是浏览器发送过来的host；如果设置成true：发送请求头中host会设置成target。
			changeOrigin: true,
			// 是否代理 websocket
			ws: true,
			rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
			// https 的地址需要 secure=false
			...(isHttps ? { secure: false } : {})
		};
	}
	return ret;
}