后端集成

注意

如果你想使用传统的后端（例如 Rails、Laravel）来提供 HTML，但使用 Vite 来提供资源，请查看 Awesome Vite 中列出的现有集成。

如果你需要自定义集成，你可以按照本指南中的步骤手动配置它。

在你的 Vite 配置中，配置入口并启用构建清单。

// vite.config.js
export default defineConfig
({
  build
: {
    // generate .vite/manifest.json in outDir
    manifest
: true,
    rollupOptions
: {
      // overwrite default .html entry
      input
: '/path/to/main.js',
    },
  },
})

如果你没有禁用模块预加载 polyfill，你还需要在你的入口中导入 polyfill。

// add the beginning of your app entry
import 'vite/modulepreload-polyfill'

对于开发环境，在你的服务器的 HTML 模板中注入以下内容（将 http://localhost:5173 替换为 Vite 运行的本地 URL）。
html
```

<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/main.js"></script>
```
为了正确地提供资源，你有两种选择。
- 确保服务器配置为将静态资源请求代理到 Vite 服务器。
- 设置 server.origin，以便生成的资源 URL 将使用后端服务器 URL 而不是相对路径解析。
这是为了确保图像等资源能够正确加载。
注意，如果你使用 React 和 @vitejs/plugin-react，你还需要在上面的脚本之前添加以下内容，因为该插件无法修改你提供的 HTML（将 http://localhost:5173 替换为 Vite 运行的本地 URL）。
html
```
<script type="module">
  import RefreshRuntime from 'http://localhost:5173/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>
```

对于生产环境：运行 vite build 后，将生成一个 .vite/manifest.json 文件，以及其他资源文件。一个示例清单文件如下所示。

json

{
  "main.js": {
    "file": "assets/main.4889e940.js",
    "src": "main.js",
    "isEntry": true,
    "dynamicImports": ["views/foo.js"],
    "css": ["assets/main.b82dbe22.css"],
    "assets": ["assets/asset.0ab0f9cd.png"],
    "imports": ["_shared.83069a53.js"]
  },
  "views/foo.js": {
    "file": "assets/foo.869aea0d.js",
    "src": "views/foo.js",
    "isDynamicEntry": true,
    "imports": ["_shared.83069a53.js"]
  },
  "_shared.83069a53.js": {
    "file": "assets/shared.83069a53.js",
    "css": ["assets/shared.a834bfc3.css"]
  }
}

清单具有 Record<name, chunk> 结构。
对于入口或动态入口块，键是相对于项目根目录的相对 src 路径。
对于非入口块，键是生成的文件的基名称，以 _ 为前缀。
块将包含有关其静态和动态导入的信息（两者都是映射到清单中相应块的键），以及其相应的 CSS 和资源文件（如果有）。

你可以使用此文件来渲染带有哈希文件名的链接或预加载指令。
以下是一个渲染正确链接的示例 HTML 模板。这里的语法仅用于说明，请用你的服务器模板语言替换。importedChunks 函数仅用于说明，Vite 没有提供。
html
```



<link rel="stylesheet" href="/{{ cssFile }}" />



<link rel="stylesheet" href="/{{ cssFile }}" />

<script type="module" src="/{{ manifest[name].file }}"></script>


<link rel="modulepreload" href="/{{ chunk.file }}" />
```
具体来说，后端生成 HTML 应该在给定清单文件和入口点的情况下包含以下标签。
- 对于入口点块的 css 列表中的每个文件，包含一个 <link rel="stylesheet"> 标签。
- 递归地遍历入口点的 imports 列表中的所有块，并为每个导入块的每个 CSS 文件包含一个 <link rel="stylesheet"> 标签。
- 一个用于入口点块的 file 键的标签（对于 JavaScript 为 <script type="module">，对于 CSS 为 <link rel="stylesheet">）。
- 可选地，对于每个导入的 JavaScript 块的 file，包含一个 <link rel="modulepreload"> 标签，同样递归地遍历从入口点块开始的导入。
根据上面的示例清单，对于入口点 main.js，应该在生产环境中包含以下标签。
html
```
<link rel="stylesheet" href="assets/main.b82dbe22.css" />
<link rel="stylesheet" href="assets/shared.a834bfc3.css" />
<script type="module" src="assets/main.4889e940.js"></script>

<link rel="modulepreload" href="assets/shared.83069a53.js" />
```
而对于入口点 views/foo.js，应该包含以下内容。
html
```
<link rel="stylesheet" href="assets/shared.a834bfc3.css" />
<script type="module" src="assets/foo.869aea0d.js"></script>

<link rel="modulepreload" href="assets/shared.83069a53.js" />
```

后端集成 ​

后端集成