感謝樓上大大們的幫助,我針對每個解決方法來說明一下 首先是 @小哈片刻 提出的採用 `--allow-file-access-from-files` 方法,確實這個方法可以有效地取消本地端瀏覽器 CORS 的規範,讓我成功載入 `main.js`。 基本上用這個方法我任何資源(css, js, svg, icon)都可以正常載入,但還是遇到限制: 譬如:透過 `npm run preview` 然後使用 `localhost:4173` 瀏覽的範例專案,它頁面的右側欄位應該要是有東西的,例如: ![圖片](https://hackmd.io/_uploads/SyOpLrVO3.png) 然後如果你點擊 About 會跳轉到 `localhost:4173\about`,應該會變成這樣: ![圖片](https://hackmd.io/_uploads/HJ3hLrE_n.png) 但如果是直接 Local Files Access 會變成這樣: ![圖片](https://hackmd.io/_uploads/H1FuUS4_h.png) 基本上路由相關的功能都會壞掉,譬如理論上那個 Home 應該要是灰色的(當前所在路由),然後右邊欄位是完全沒有顯示 如果嘗試點擊 Home 則會跳轉到 `file:///C:/`、About 則變成了 `file:///C:/about`。 我有嘗試去 `App.vue` 把 `<RouterLink to="/">Home</RouterLink>` 改成 `<RouterLink to="./">Home</RouterLink>` 用相對路徑的方式,但結果 `Home` 會變成連結到 `file:///C:/Users/Jack/Desktop/%E7%B6%B2%E7%AB%99/vue-project/dist/`;而 `About` 會連結到 `file:///C:/Users/Jack/Desktop/%E7%B6%B2%E7%AB%99/vue-project/dist/about` 基本上就是檔案瀏覽器了... ![圖片](https://hackmd.io/_uploads/HyH6OrNun.png) 至於 @bendwarn 和 @海綿寶寶 提出的方法中有一個想法是使用 `@vite-plugin-singlefile` 套件,來把所有 js 和 css 都輸出在 `index.html` 檔案上面,確實這樣也可以避開 CORS 甚至不用去 CMD 下 `--allow-file-access-from-files` 指令,但小缺點就是我 svg 和 icon 的資源路徑生成還是錯誤的,即使我有在 `vite.config.ts` 中設定 `base: './'`,也沒有辦法變成相對路徑,這些圖檔的存取都是絕對路徑例如 `file:///C://favicon.ico` 這樣。 我有發現我只要使用 `vite-plugin-singlefile` 套件就會把 `base: './'` 設定給覆寫掉。 然後最大的問題就是依舊是我上面說的路由連結問題,後來我有去 stackexchange 上面找到一個[討論](https://superuser.com/questions/543744/can-static-websites-be-viewed-without-a-server/1008453#1008453) 大概的含意就是說雖然靜態網站可以在不需要伺服器的情況下被瀏覽器來瀏覽,但會有諸多限制,例如路由連結就是一個很大的問題。 所以我目前研究下來如果真的要使用 vite + vue3 開發的話,不架一個 local server 可能真的無法讓我想要的功能都正常。 也許我要考慮說服客戶端能不能讓我安裝 local server;或是說我有想過要不要用 electron 包起來;不然就是我要妥協可能就乖乖地寫 native 網站了 QQ