vite.config.ts

如果您的專案仍然使用傳統 Remix 編譯器，您應該參考remix.config.js 文件。

Remix 使用 Vite 來編譯您的應用程式。您需要提供一個包含 Remix Vite 外掛程式的 Vite 設定檔。以下是您需要的最基本設定

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [remix()],
});

Vite 支援使用 .js 檔案作為設定檔，但我們建議使用 TypeScript 以確保您的設定有效。

Remix Vite 外掛程式設定

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      basename: "/",
      buildDirectory: "build",
      future: {
        /* any enabled future flags */
      },
      ignoredRouteFiles: ["**/*.css"],
      routes(defineRoutes) {
        return defineRoutes((route) => {
          route("/somewhere/cool/*", "catchall.tsx");
        });
      },
      serverBuildFile: "index.js",
    }),
  ],
});

appDirectory

app 目錄的路徑，相對於專案根目錄。預設為 "app"。

future

future 設定讓您透過未來標記選擇加入未來的重大變更。

ignoredRouteFiles

這是一個 globs 陣列（透過 minimatch），Remix 在讀取您的 app/routes 目錄時會將其與檔案比對。如果檔案符合，它會被忽略，而不是被視為路由模組。這對於忽略您希望共置的 CSS/測試檔案很有用。

routes

一個用於定義自訂路由的函數，除了已經使用 app/routes 中的檔案系統慣例定義的路由之外。兩組路由將被合併。

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      routes: async (defineRoutes) => {
        // If you need to do async work, do it before calling `defineRoutes`, we use
        // the call stack of `route` inside to set nesting.

        return defineRoutes((route) => {
          // A common use for this is catchall routes.
          // - The first argument is the React Router path to match against
          // - The second is the relative filename of the route handler
          route("/some/path/*", "catchall.tsx");

          // if you want to nest routes, use the optional callback argument
          route("some/:path", "some/route/file.js", () => {
            // - path is relative to parent path
            // - filenames are still relative to the app directory
            route("relative/path", "some/other/file");
          });
        });
      },
    }),
  ],
});

serverModuleFormat

伺服器建置的輸出格式，可以是 "cjs" 或 "esm"。預設為 "esm"。

buildDirectory

建置目錄的路徑，相對於專案根目錄。預設為 "build"。

basename

您的路由路徑的可選 basename，傳遞給 React Router "basename" 選項。請注意，這與您的資產路徑不同。您可以透過 Vite "base" 選項設定資產的基礎公開路徑。

buildEnd

在完整的 Remix 建置完成後呼叫的函數。

manifest

是否將 .remix/manifest.json 檔案寫入建置目錄。預設為 false。

presets

一個預設陣列，用於簡化與其他工具和主機供應商的整合。

serverBuildFile

在伺服器建置目錄中產生的伺服器檔案名稱。預設為 "index.js"。

serverBundles

一個用於將可定址的路由指派給伺服器套件的函數。

您可能也希望啟用 manifest 選項，因為當啟用伺服器套件時，它包含路由和伺服器套件之間的對應。