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

这是一个 glob（通过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选项，因为在启用服务器捆绑包时，它包含路由和服务器捆绑包之间的映射。