vite.config.ts

vite.config.ts

如果您的项目仍在使用 Classic Remix 编译器，则应参考 remix.config.js 文档。

Remix 使用 Vite 编译您的应用程序。您需要为 Remix Vite 插件提供一个 Vite 配置文件。以下是您需要的最低配置：

vite.config.ts

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

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

Vite 支持使用 .js 文件进行配置，但我们建议使用 TypeScript 来帮助确保您的配置有效。

Remix Vite 插件配置

vite.config.ts

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",
    }),
  ],
});

应用程序目录

相对于项目根目录的 app 目录路径。默认为 "app"。

未来

future 配置让你可以通过 Future Flags 选择加入未来的重大变更。

忽略的路由文件

这是 Remix 在读取您的 app/routes 目录时将匹配到文件的 glob 数组（通过 minimatch）。如果文件匹配，它将被忽略，而不是像路由模块一样处理。这对于忽略您希望共置的 CSS / 测试文件很有用。

路由

除了已使用 app/routes 中的文件系统约定定义的路由之外，还用于定义自定义路由的函数。两组路由将合并。

vite.config.ts

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");
          });
        });
      },
    }),
  ],
});

服务器模块格式

服务器构建的输出格式，可以是 cjs 或 esm。 默认为 esm。

构建目录

相对于项目根目录的构建目录路径。默认为 build。

基本名称

路由路径的可选基本名称，通过 React Routerbasename选项 传递。请注意，这与您的 asset 路径不同。您可以通过 Vitebase选项 为您的资产配置 基本公共路径。

构建结束

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

显现

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

预设

一系列 预设 可轻松与其他工具和托管服务提供商集成。

服务器构建文件

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

服务器包

用于为 服务器包 分配可寻址路由的函数。

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