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