vite-不同场景下的集成及配置方式
vitebuild toolarchitecture
在实际业务开发中,只是通过 vite 官方提供的模版还不足以满足当前业务接入的需求。特此记录整理常见业务模型下对于 vite 的整合方式
传统后端集成是将 vite 原本的开发环境能力整合到现有的后端服务中,处于前端的生产环境处理没有变动
在 vite 配置中配置入口文件并启用manifest
/frontend/xxx/vite.config.js
js
export default defineConfig({
build: {
manifest: true,
rollupOptions: {
input: "/xxx/main.js",
},
},
})
模块预加载polyfill
/frontend/xxx/main.js
js
import "vite/modulepreload-polyfill"
开发环境中,在后端 serve 的 index.html 中添加 vite 客户端文件和前端入口文件
/server/template/index.html
html
<script type="module" src="http://localhost:5183/@vite/client"></script>
<script type="module" src="http://localhost:5183/frontend/main.js"></script>
生产环境中通过生成的manifest
清单文件进行对前端模版进行注入并渲染,
js
const manifest = require("./dist/manifest.json")
app.use(express.static("dist"))
app.ge("/", (req, res) => {
res.render("index", {
title: "xxx",
index: manifest["index.html"].file,
vendor: manifest["index.html"].imports.vendor,
css: manifest["index.html"].css[0],
})
})
当想要对自己的 server 又完全控制权时可以使用中间件模式(任意兼容 connect 的 nodejs 框架),典型的例子就是以 node 服务端渲染
js
import express from "express"
import { createServer as createViteServer } from "vite"
async function createServer() {
const app = new express()
const vite = await createViteServer({
server: {
middlewareMode: true,
},
appType: "custom",
})
app.use(vite.middlewares)
app.use("*", async (req, res) => {
})
app.listen(3000)
}
createServer()
todo