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​

​​ 的别名有所不同，会带上 ​

​/@​

​

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

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