简单说一下vue里面的响应式系统（纯静态服务端渲染）

$ npm init vite@latest

// - import { createApp } from 'vue' // 引入 createSSRApp 替换 createApp import { createSSRApp } from 'vue' import App from './App.vue' // - createApp(App).mount('#app') // 暴露统一方法createApp export function createApp() { const app = createSSRApp(App) // 先不挂载dom，在客户端和服务端分别挂载 // - app.mount('#app') return { app } }

C 音视频开发学习资料：点击莬费领取→音视频开发（资料文档 视频教程 面试题）（FFmpeg WebRTC RTMP RTSP HLS RTP）

import { createApp } from "./main"; const { app } = createApp() app.mount('#app')

// <script type="module" src="/src/main.js"></script> <script type="module" src="/src/entry-client.js"></script>

重新运行项目，确保一切正常

const fs = require('fs') const path = require('path') const express = require('express') const { createServer: createViteServer } = require('vite') async function createserver() { const app = express() // 以中间件模式创建 Vite 应用，这将禁用 Vite 自身的 HTML 服务逻辑 // 并让上级服务器接管控制 // // 如果你想使用 Vite 自己的 HTML 服务逻辑（将 Vite 作为 // 一个开发中间件来使用），那么这里请用 'html' const vite = await createViteServer({ server: { middlewareMode: 'ssr' } }) // 使用 vite 的 Connect 实例作为中间件 app.use(vite.middlewares) app.use('*', async (req, res) => { const url = req.originalUrl try { // 1. 读取 index.HTML let template = fs.readFileSync( path.resolve(__dirname, 'index.html'), 'utf-8' ) // 2. 应用 Vite HTML 转换。这将会注入 Vite HMR 客户端， // 同时也会从 Vite 插件应用 HTML 转换。 // 例如：@vitejs/plugin-react-refresh 中的 global preambles template = await vite.transformIndexHtml(url, template) // 3. 加载服务器入口。vite.ssrLoadModule 将自动转换 // 你的 ESM 源码使之可以在 Node.js 中运行！无需打包 // 并提供类似 HMR 的根据情况随时失效。 const { render } = await vite.ssrLoadModule('/src/entry-server.js') // 4. 渲染应用的 HTML。这假设 entry-server.js 导出的 `render` // 函数调用了适当的 SSR 框架 API。 // 例如 ReactDOMServer.renderToString() const apphtml = await render(url) // 5. 注入渲染后的应用程序 HTML 到模板中。 const html = template.replace(`<!--ssr-outlet-->`, appHtml) // 6. 返回渲染后的 HTML。 res.status(200).set({ 'Content-Type': 'text/html' }).end(html) } catch (e) { // 如果捕获到了一个错误，让 Vite 来修复该堆栈，这样它就可以映射回 // 你的实际源码中。 vite.ssrFixStacktrace(e) console.error(e) res.status(500).end(e.message) } }) app.listen(3000, () => console.log('server is running at http://localhost:3000')) } createServer()

import { createApp } from "./main" import { renderToString } from 'vue/server-renderer' export async function render(url) { const { app } = createApp() const html = renderToString(app) return html }

// <div id="app"></div> <div id="app"><!--ssr-outlet--></div>

npm i express -D node server

C 音视频开发学习资料：点击莬费领取→音视频开发（资料文档 视频教程 面试题）（FFmpeg WebRTC RTMP RTSP HLS RTP）

npm i cross-env -D

// package.json "scripts": { "dev": "vite", // 开发环境 "start:ssr": "cross-env NODE_ENV=developemnt node server", // 线上环境 "prod:ssr": "cross-env NODE_ENV=production node server", "build": "vite build", "preview": "vite preview", // 打包客户端 "build:client": "vite build --outDir dist/client", // 打包服务端 "build:server": "vite build --outDir dist/server --ssr src/entry-server.js", "build:ssr": "npm run build:client && npm run build:server" },

// 引入serve-static const serveStatic = require('serve-static') // 判断当前环境 const isProd = process.env.NODE_ENV === 'production' // 根据当前环境使用vite或serve-static let vite = await createViteServer({ server: { middlewareMode: 'ssr' } }) if (isProd) { app.use(serveStatic(path.resolve(__dirname, 'dist/client'), { index: false })) } else { app.use(vite.middlewares) } if (isProd) { // 1. 读取 index.html template = fs.readFileSync( path.resolve(__dirname, 'dist/client/index.html'), 'utf-8' ) // 3. 加载服务器入口。vite.ssrLoadModule 将自动转换 // 你的 ESM 源码使之可以在 Node.js 中运行！无需打包 // 并提供类似 HMR 的根据情况随时失效。 render = require('./dist/server/entry-server.js').render } else { // 1. 读取 index.html template = fs.readFileSync( path.resolve(__dirname, 'index.html'), 'utf-8' ) // 2. 应用 Vite HTML 转换。这将会注入 Vite HMR 客户端， // 同时也会从 Vite 插件应用 HTML 转换。 // 例如：@vitejs/plugin-react-refresh 中的 global preambles template = await vite.transformIndexHtml(url, template) // 3. 加载服务器入口。vite.ssrLoadModule 将自动转换 // 你的 ESM 源码使之可以在 Node.js 中运行！无需打包 // 并提供类似 HMR 的根据情况随时失效。 render = (await vite.ssrLoadModule('/src/entry-server.js')).render }

C 音视频开发学习资料：点击莬费领取→音视频开发（资料文档 视频教程 面试题）（FFmpeg WebRTC RTMP RTSP HLS RTP）

const fs = require('fs') const path = require('path') const express = require('express') const serveStatic = require('serve-static') const { createServer: createViteServer } = require('vite') const isProd = process.env.NODE_ENV === 'production' async function createServer() { const app = express() let vite = await createViteServer({ server: { middlewareMode: 'ssr' } }) if (isProd) { app.use(serveStatic(path.resolve(__dirname, 'dist/client'), { index: false })) } else { app.use(vite.middlewares) } app.use('*', async (req, res) => { const url = req.originalUrl let template let render try { if (isProd) { template = fs.readFileSync( path.resolve(__dirname, 'dist/client/index.html'), 'utf-8' ) render = require('./dist/server/entry-server.js').render } else { template = fs.readFileSync( path.resolve(__dirname, 'index.html'), 'utf-8' ) template = await vite.transformIndexHtml(url, template) render = (await vite.ssrLoadModule('/src/entry-server.js')).render } const appHtml = await render(url) const html = template.replace(`<!--ssr-outlet-->`, appHtml) res.status(200).set({ 'Content-Type': 'text/html' }).end(html) } catch (e) { vite.ssrFixStacktrace(e) console.error(e) res.status(500).end(e.message) } }) app.listen(3000, () => console.log(`server is running at ${isProd ? '线上' : '开发'}环境： http://localhost:3000`)) } createServer()

如果你对音视频开发感兴趣，或者对本文的一些阐述有自己的看法，可以在下方的留言框，一起探讨。