Vue-rsbuild添加index.html - 溪客(编程代码)

📌 背景

在前端构建工具中，index.html 是应用的入口 HTML 文件，它会被打包流程处理并注入生成的资源（如 JS、CSS）。Rsbuild 作为一个高性能构建工具，在处理 index.html 时有其默认约定和可配置项。了解其位置和配置方式，有助于正确迁移或创建项目。

🔍 默认位置与配置方法

Rsbuild 并不强制要求 index.html 必须放在某个特定位置，但遵循主流框架（如 Vue CLI）的惯例，推荐将其放在 public/ 目录下。该文件的位置通过 Rsbuild 的配置文件 rsbuild.config.ts 进行指定。

以下是关键信息总结：

配置项	Rsbuild 配置方式	说明
HTML 模板路径	`html.template: './public/index.html'`	明确指定 `index.html` 的文件路径 21。若不配置，Rsbuild 会使用内置默认模板。
默认入口行为	默认使用 `src/index.js` 作为入口	与 Vite 不同，Rsbuild 默认以 JS 文件为入口，而非 `index.html`。
文件存在性	`public/index.html` 可选	如果项目根目录没有设置 `html.template` ，Rsbuild 会自动生成一个基础的 `index.html` 2。

若你的项目是从 Vue CLI 或其他脚手架迁移而来，index.html 很可能已在 public/ 目录中。
在 rsbuild.config.ts 中，必须通过 html.template 指向该文件，才能确保自定义内容被正确读取和注入资源。
如果未创建此文件且未指定模板，构建过程仍会成功，但会使用 Rsbuild 的默认 HTML 模板，这可能导致页面结构不符合预期。

✅ 正确做法建议

要确保 index.html 被正确使用，请按以下步骤操作：

确认文件位置：检查项目中是否存在 public/index.html 。如果不存在，可根据需要创建。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MYBODY</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

配置模板路径：在 rsbuild.config.ts 中添加或确认以下配置：

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

// Docs: https://rsbuild.rs/config/
export default defineConfig({
  plugins: [pluginVue()],
  html: {
    template: './public/index.html',
  },
});

移除旧的 script 引用：如果从 Vite 迁移，需删除 index.html 中手动引入的 <script type="module" src="/src/main.ts"> 标签，改由 Rsbuild 自动注入。

结论

index.html 最佳实践位置是 public/index.html ，并通过 rsbuild.config.ts 中的 html.template 选项显式配置。虽然 Rsbuild 支持自动生成模板，但为了完全控制页面结构和静态资源，建议始终提供自定义的 index.html 文件。