Remix 使用 Vite 编译你的应用。你需要提供一个包含 Remix Vite 插件的 Vite 配置文件。以下是你需要的最低配置：
¥Remix uses Vite to compile your application. You'll need to provide a Vite config file with the Remix Vite plugin. Here's the minimum configuration you'll need:
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [remix()],
});
.js 文件进行配置，但我们建议使用 TypeScript 来确保配置有效。
¥Remix Vite Plugin Config
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"。
¥The path to the app directory, relative to the project root. Defaults to
"app".
future 配置允许你通过 未来标志 选择接受未来的重大更改。
¥The future config lets you opt-into future breaking changes via Future Flags.
这是一个 glob 数组（通过 minimatch 实现），Remix 将在读取你的 app/routes 目录时将其与文件匹配。如果文件匹配，它将被忽略，而不是被视为路由模块。这对于忽略你希望共置的 CSS/测试文件很有用。
¥This is an array of globs (via minimatch) that Remix will match to
files while reading your app/routes directory. If a file matches, it will be
ignored rather than treated like a route module. This is useful for ignoring
CSS/test files you wish to colocate.
一个用于定义自定义路由的函数，除了那些已在 app/routes 中使用文件系统约定定义的路由之外。两组路由都将合并。
¥A function for defining custom routes, in addition to those already defined
using the filesystem convention in app/routes. Both sets of routes will be merged.
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"。
¥The output format of the server build, which can either be "cjs" or "esm".
Defaults to "esm".
构建目录的路径，相对于项目根目录。默认为 "build"。
¥The path to the build directory, relative to the project root. Defaults to
"build".
路由路径的可选基名，传递给 React Router "basename" 选项。请注意，这与你的资源路径不同。你可以通过 Vite "base" 选项 为你的资源配置 基本公共路径。
¥An optional basename for your route paths, passed through to the React Router "basename" option. Please note that this is different from your asset paths. You can configure the base public path for your assets via the Vite "base" option.
一个在完整的 Remix 构建完成后调用的函数。
¥A function that is called after the full Remix build is complete.
是否将 .remix/manifest.json 文件写入构建目录。默认为 false。
¥Whether to write a .remix/manifest.json file to the build directory. Defaults
to false.
一个 presets 数组，用于简化与其他工具和托管服务提供商的集成。
¥An array of presets to ease integration with other tools and hosting providers.
服务器文件的名称在服务器构建目录中生成。默认为 "index.js"。
¥The name of the server file is generated in the server build directory. Defaults to "index.js".
一个用于为 服务器包 分配可寻址路由的函数。
¥A function for assigning addressable routes to server bundles.
你可能还需要启用 manifest 选项，因为当启用服务器包时，它包含路由和服务器包之间的映射。
¥You may also want to enable the manifest option since, when server bundles are enabled, it contains mappings between routes and server bundles.
