后端集成
如果你想使用传统的后端(如 Rails, Laravel)来服务 HTML,但使用 Vite 来服务其他资源,可以查看在 Awesome Vite 上的已有的后端集成列表。
或者你可以按照如下步骤手动配置:
在你的 Vite 配置中配置入口文件和启用创建
manifest
:// vite.config.js
export default {
build: {
// 在 outDir 中生成 manifest.json
manifest: true,
rollupOptions: {
// 覆盖默认的 .html 入口
input: '/path/to/main.js'
}
}
}
如果你使用了
@vitejs/plugin-legacy
插件或者手动开启build.dynamicImportPolyfill
选项,请记得将 dynamic import polyfill 添加到入口处,因为它并不会被自动注入:// 添加到你应用入口文件的开头
import 'vite/dynamic-import-polyfill'
在开发环境中,在服务器的 HTML 模板中注入以下内容(用正在运行的本地 URL 替换
http://localhost:3000
):<!-- 如果是在开发环境中 -->
<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/main.js"></script>
还要确保服务器配置为提供 Vite 工作目录中的静态资源,否则图片等资源将无法正确加载。
如果你正使用
@vitejs/plugin-react-refresh
配合 React,你还需要在上述脚本前添加下面这个,因为插件不能修改你正在服务的 HTML:<script type="module">
import RefreshRuntime from 'http://localhost:3000/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
在生产环境中:在运行
vite build
之后,一个manifest.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"]
},
"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"
}
}
- 清单是一个
Record<name, chunk>
结构的对象。 - 对于 入口 或动态入口 chunk,键是相对于项目根目录的资源路径。
- 对于非入口 chunk,键是生成文件的名称并加上前缀
_
。 - Chunk 将信息包含在其静态和动态导入上(两者都是映射到清单中相应 chunk 的键),以及任何与之相关的 CSS 和资源文件。
你可以使用这个文件来渲染链接或者用散列文件名预加载指令(注意:这里的语法只是为了解释,实际使用时请你的服务器模板语言代替):
<!-- 如果是在生产环境中 -->
<link rel="stylesheet" href="/assets/{{ manifest['main.js'].css }}" />
<script type="module" src="/assets/{{ manifest['main.js'].file }}"></script>