后端集成

注意

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

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

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

vite.config.js

export default defineConfig
({
  server
: {
    cors
: {
      // the origin you will be accessing via browser
      origin
: 'http://my-backend.example.com',
    },
  },
  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 而不是相对路径来解析
这是加载图像等资源所必需的。
请注意，如果您正在使用带有 @vitejs/plugin-react 的 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 文件以及其他资源文件。一个示例清单文件如下所示

.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> 结构
对于入口或动态入口块，key 是相对于项目根目录的 src 路径。
对于非入口块，key 是生成文件的基本名称，前缀为 _。
对于当 build.cssCodeSplit 为 false 时生成的 CSS 文件，key 是 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 的伪实现

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

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])
}

后端集成 ​

后端集成