關於 Vite 部署到 GitHub Pages 卻找不到 _plugin-vue_export-helper 問題

前言

最近發現 vite 編譯之後部署到 GitHub Pages 會突然無法正常運作的問題發生，然後發現是 _plugin-vue_export-helper 在搞鬼，所以這一篇記錄一下。

事發原因

當部署到 vite 執行 npm run build 之後接著部署到 GitHub Pages 卻會一直出現

TypeError: error loading dynamically imported module
來源為「/assets/_plugin-vue_export-helper.cdc0426e.js」的模組載入失敗。

然後畫面就會整個都是空白的，因此接著這邊記錄一下解決方式。

解決方式

首先一開始我以為是路徑出現問題，所以嘗試瀏覽器 URL 輸入其他檔案的路徑，發現是可以正常載入的，所以就開始檢查 _plugin-vue_export-helper.cdc0426e.js 這個檔案。

唯獨這個檔案不管怎麼樣讀取就是會 404

接著就丟上網路查了一下 「_plugin-vue_export-helper」，所以就查到了這一篇文章 _plugin-vue_export-helper js file cant not be access with Github Pages(404)

然後 _plugin-vue_export-helper 這個檔案命名規則上在某些環境下會有問題，所以這邊就要把這個檔案改名，而 vite 底層本身是使用 rollup 去編譯的，因此這邊就要去修改 rollup 的設定。

所以這邊可以翻到這個檔案 sanitizeFileName.ts，這個檔案是用來處理檔案名稱的，所以這邊就要去修改這個檔案的設定，但我們不可能直接去修改這個檔案，因為這個檔案是在 node_modules 底下，所以這邊就要去修改 vite 的設定。

首先打開 vite.config.js 這個檔案，然後加入以下設定

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// eslint-disable-next-line no-control-regex
const INVALID_CHAR_REGEX = /[\x00-\x1F\x7F<>*#"{}|^[\]`;?:&=+$,]/g;
const DRIVE_LETTER_REGEX = /^[a-z]:/i;

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  build: {
    rollupOptions: {
      output: {
        // https://github.com/rollup/rollup/blob/master/src/utils/sanitizeFileName.ts
        sanitizeFileName(name) {
          const match = DRIVE_LETTER_REGEX.exec(name);
          const driveLetter = match ? match[0] : '';
          // substr 是被淘汰語法，因此要改 slice
          return (
            driveLetter +
            name.slice(driveLetter.length).replace(INVALID_CHAR_REGEX, "")
          );
        },
      },
    },
  },
});

基本上這樣子就可以將 _plugin-vue_export-helper 這個檔案改名了，然後重新部署到 GitHub Pages 就可以正常運作了。

參考文獻

• _plugin-vue_export-helper js file cant not be access with Github Pages(404)
• sanitizeFileName.ts