產生的設定可以直接跑嗎？

它是目前 Vite 版本可用的 vite.config.ts，格式也照 Vite 官方文件的寫法。提交前請先讀過一遍——工具不可能知道你的 monorepo 佈局、你的路由，或你的後端是不是真的想把前綴去掉。它產生的一切都是標準、有文件可查的 Vite 設定。

為什麼用 fileURLToPath 而不是 __dirname？

因為帶有 `import` 陳述式的設定檔會被當成 ES module，而在那裡 `__dirname` 並不存在。`fileURLToPath(new URL("./src", import.meta.url))` 是在 ESM 設定檔與 `type: module` 套件裡都行得通的寫法，所以產生器輸出的就是它。

rewrite 選項的作用是什麼？

開啟 strip 時，送到 /api/users 的請求會被轉送到 /users——當前綴只是代理慣例時，這正是你要的。關閉時前綴也會一起轉送，這適用於後端真的在服務 /api/users 的情況。規則表會顯示每一行產生的是哪一種。

我需要 secure: false 嗎？

只有當你的開發用後端使用自簽憑證時才需要。它會關閉代理的憑證驗證，所以只要它出現在某條規則裡，工具就會標示出來——把它擋在共用設定之外正是這個警告的目的，不是形式上的提醒。

它可以檢查既有的設定嗎？

這個頁面負責產生；同一個 Vite 系列裡的夥伴工具負責檢查。它在這裡已經能做的是抓出審閱時最常出錯的規則：指向套件名稱而不是路徑的別名、不是識別字或 import.meta.env.X 的 define 鍵、重複的別名，以及在建置正式產物時開啟 sourcemap。

vite.config.ts 產生器

勾選專案需要的選項，複製一份完整、在關鍵處附上註解的設定：別名、開發代理（支援改寫與 WebSocket）、建置目標、manual chunk、env 前綴。貼上你的後端路徑，它們就會變成 server.proxy 規則——包含那些需要改寫的。

base部署路徑。Vite 需要開頭的斜線；history 模式的路由也需要同樣的值。

host: true（區域網路存取）開啟瀏覽器strictPort

開發埠預覽埠

resolve.alias

define（編譯期常數）

CSS 預處理器outDirbuild.targetchunkSizeWarningLimitmanualChunksenvPrefixoptimizeDeps.include

@vitejs/plugin-vue@vitejs/plugin-vue-jsxsourcemap（僅限測試環境）minify

這個頁面只產生文字：什麼都不會上傳，也不會替你安裝任何套件——安裝指令只是印出來讓你自己執行。

產生的 vite.config.ts

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  define: {
    __APP_VERSION__: JSON.stringify("1.0.0"),
  },
  server: {
    host: true,
    port: 5173,
    strictPort: true,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      '/socket': {
        target: 'ws://localhost:6001',
        changeOrigin: true,
        ws: true,
      },
    },
  },
  preview: { port: 4173 },
  build: {
    outDir: 'dist',
    target: 'es2020',
    sourcemap: false,
    chunkSizeWarningLimit: 600,
  },
  envPrefix: 'VITE_',
  optimizeDeps: { include: ['vue', 'vue-router'] },
});

這份設定 import 的套件

npm i -D vite @vitejs/plugin-vue

安裝這份設定所 import 的套件：

說明

「ws://localhost:6001」是 ws:// 目標，因此已加上 ws: true。

為什麼要產生它，而不是複製一篇部落格文章

每個第一次設定 Vite 的人，最後都是從某篇部落格文章複製一份設定，而那些片段會腐壞：它們在只支援 ESM 的設定檔裡用 `path.resolve(__dirname, …)`、把建置目標釘在三年前、用一種已經對不上 Vite 目前拆分共用程式碼方式的手法拆 vendor chunk。結果它還是跑得起來，這正是問題所在——在部署時某個東西壞掉之前，沒有人會注意到那一段已經過時。

所以這個頁面只產生你勾選的東西，而且形狀符合 Vite 現在的寫法：

只產生你要的。 把代理欄位留空，就不會輸出一個空的 `server.proxy` 物件；不選預處理器，設定裡就沒有 `css` 區段。產生出來的檔案應該讀起來像人寫的檔案，而不是表單倒出來的內容——這也是它能在 pull request 裡被審閱的原因。
部落格片段最常錯的兩件事。 別名會以 `fileURLToPath(new URL("./src", import.meta.url))` 輸出，這在 Vite 以 ESM 載入的設定檔裡才成立；define 的值則會經過 `JSON.stringify`，讓版本字串維持是字串。這兩處正是複製來的設定在別人機器上壞掉的地方。
從清單產生代理規則。 一行一個後端路徑（或直接貼完整的 https://host/api URL 讓它自己拆），工具就會寫出 `server.proxy` 區塊，包含把前綴去掉的改寫，以及給 WebSocket 目標用的 `ws: true`。它也會標出陷阱：沒有 scheme 的目標、重複的路徑，以及 `secure: false`——那會關閉憑證檢查，只該用在本機開發。

什麼都不會上傳，也不會替你安裝任何東西：這個頁面只產生文字，它印出的安裝指令由你在自己決定的地方執行。兩點誠實的限制——它不知道你用的是哪個 Vite 版本，所以版本相關的選項只保留多年來一直穩定的那些；它也不會猜你的路由模式，只會提醒：`base` 不是 `/` 時，history 模式的路由也必須給同樣的值。如果你要檢查既有的設定而不是寫一份新的，那是這個系列裡的另一個工具。

常見問題

產生的設定可以直接跑嗎？: 它是目前 Vite 版本可用的 vite.config.ts，格式也照 Vite 官方文件的寫法。提交前請先讀過一遍——工具不可能知道你的 monorepo 佈局、你的路由，或你的後端是不是真的想把前綴去掉。它產生的一切都是標準、有文件可查的 Vite 設定。
為什麼用 fileURLToPath 而不是 __dirname？: 因為帶有 `import` 陳述式的設定檔會被當成 ES module，而在那裡 `__dirname` 並不存在。`fileURLToPath(new URL("./src", import.meta.url))` 是在 ESM 設定檔與 `type: module` 套件裡都行得通的寫法，所以產生器輸出的就是它。
rewrite 選項的作用是什麼？: 開啟 strip 時，送到 /api/users 的請求會被轉送到 <target>/users——當前綴只是代理慣例時，這正是你要的。關閉時前綴也會一起轉送，這適用於後端真的在服務 /api/users 的情況。規則表會顯示每一行產生的是哪一種。
我需要 secure: false 嗎？: 只有當你的開發用後端使用自簽憑證時才需要。它會關閉代理的憑證驗證，所以只要它出現在某條規則裡，工具就會標示出來——把它擋在共用設定之外正是這個警告的目的，不是形式上的提醒。
它可以檢查既有的設定嗎？: 這個頁面負責產生；同一個 Vite 系列裡的夥伴工具負責檢查。它在這裡已經能做的是抓出審閱時最常出錯的規則：指向套件名稱而不是路徑的別名、不是識別字或 import.meta.env.X 的 define 鍵、重複的別名，以及在建置正式產物時開啟 sourcemap。