vite.config.ts

如果您的项目仍然使用Classic Remix Compiler，您应该参考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

一个可选的路由路径基础名称，会传递给 React Router 的 "basename" 选项。请注意，这与你的资源路径不同。你可以通过 Vite 的 "base" 选项来配置你的资源的基础公共路径。

buildEnd

一个在完整的 Remix 构建完成后调用的函数。

manifest

是否将 .remix/manifest.json 文件写入构建目录。默认为 false。

presets

一个预设数组，用于简化与其他工具和托管提供商的集成。

serverBuildFile

在服务器构建目录中生成的服务器文件的名称。默认为 "index.js"。

serverBundles

一个用于将可寻址路由分配给服务器包的函数。

你可能还需要启用 manifest 选项，因为当启用服务器包时，它包含路由和服务器包之间的映射。