后端集成

注意

如果您想使用传统的后端（例如 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 模板中注入以下内容（将 https://127.0.0.1:5173 替换为 Vite 运行的本地 URL）
html
```

<script type="module" src="https://127.0.0.1:5173/@vite/client"></script>
<script type="module" src="https://127.0.0.1:5173/main.js"></script>
```
为了正确地提供静态资源，您有两个选择
- 确保服务器已配置为将静态资源请求代理到 Vite 服务器。
- 设置 server.origin，以便使用后端服务器 URL 而不是相对路径来解析生成的资源 URL。
这对于正确加载图像等资源是必要的。
注意，如果您使用 React 以及 @vitejs/plugin-react，则还需要在上述脚本之前添加此脚本，因为该插件无法修改您提供的 HTML（将 https://127.0.0.1:5173 替换为 Vite 运行的本地 URL）
html
```
<script type="module">
  import RefreshRuntime from 'https://127.0.0.1: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 文件。示例清单文件如下所示

.vite/manifest.json

json

{
  "_shared-B7PI925R.js": {
    "file": "assets/shared-B7PI925R.js",
    "name": "shared",
    "css": ["assets/shared-ChJ_j-JJ.css"]
  },
  "_shared-ChJ_j-JJ.css": {
    "file": "assets/shared-ChJ_j-JJ.css",
    "src": "_shared-ChJ_j-JJ.css"
  },
  "baz.js": {
    "file": "assets/baz-B2H3sXNv.js",
    "name": "baz",
    "src": "baz.js",
    "isDynamicEntry": true
  },
  "views/bar.js": {
    "file": "assets/bar-gkvgaI9m.js",
    "name": "bar",
    "src": "views/bar.js",
    "isEntry": true,
    "imports": ["_shared-B7PI925R.js"],
    "dynamicImports": ["baz.js"]
  },
  "views/foo.js": {
    "file": "assets/foo-BRBmoGS9.js",
    "name": "foo",
    "src": "views/foo.js",
    "isEntry": true,
    "imports": ["_shared-B7PI925R.js"],
    "css": ["assets/foo-5UjPuW-k.css"]
  }
}

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

您可以使用此文件使用哈希文件名呈现链接或预加载指令。

这是一个用于呈现正确链接的 HTML 模板示例。此处的语法仅供说明，请替换为您的服务器模板语言。importedChunks 函数仅供说明，Vite 未提供。

html

<!-- if production -->

<!-- for cssFile of manifest[name].css -->
<link rel="stylesheet" href="/{{ cssFile }}" />

<!-- for chunk of importedChunks(manifest, name) -->
<!-- for cssFile of chunk.css -->
<link rel="stylesheet" href="/{{ cssFile }}" />

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

<!-- for chunk of importedChunks(manifest, name) -->
<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"> 标签，再次递归地遍历从入口点块开始的导入。

按照上述清单示例，对于入口点 views/foo.js，应在生产环境中包含以下标签

html

<link rel="stylesheet" href="assets/foo-5UjPuW-k.css" />
<link rel="stylesheet" href="assets/shared-ChJ_j-JJ.css" />
<script type="module" src="assets/foo-BRBmoGS9.js"></script>
<!-- optional -->
<link rel="modulepreload" href="assets/shared-B7PI925R.js" />

而对于入口点 views/bar.js，应包含以下内容

html

<link rel="stylesheet" href="assets/shared-ChJ_j-JJ.css" />
<script type="module" src="assets/bar-gkvgaI9m.js"></script>
<!-- optional -->
<link rel="modulepreload" href="assets/shared-B7PI925R.js" />

importedChunks 的伪实现

importedChunks 在 TypeScript 中的示例伪实现（这需要根据您的编程语言和模板语言进行调整）

import type { Manifest, ManifestChunk } from 'vite'

export default function importedChunks(
  manifest: Manifest,
  name: string,
): ManifestChunk[] {
  const seen = new Set<string>()

  function getImportedChunks(chunk: ManifestChunk): ManifestChunk[] {
    const chunks: ManifestChunk[] = []
    for (const file of chunk.imports ?? []) {
      const importee = manifest[file]
      if (seen.has(file)) {
        continue
      }
      seen.add(file)

      chunks.push(...getImportedChunks(importee))
      chunks.push(importee)
    }

    return chunks
  }

  return getImportedChunks(manifest[name])
}

后端集成 ​

后端集成