基于 Vue3 + TypeScript 开发SSR系统（一）：初始创建SSR

本文介绍: 一个基于 Vi t e + Typ eSc rip t + Vue3 制作的SSR渲染的We b 应用系统。

1 简介 De script i on

基于 Vue3 + Typ eSc rip t 开发SSR渲染的We b 应用系统全过程

同系列文章：
1.基于 Vue3 + TypeScript 开发SSR系统（一）：初始创建SSR

2 关键词 Keyword s

Vi t e

Typ eSc rip t

Vue3

SSR

3 集成 开发 环境 IDE

Vi su al Sutd io Code

4 开发 过程

4.1 创建 项目

图一：初始化创建项目
 创建项目选择的内容为Vue和TypeSc rip t
在这里插入图片描述
图二：项目初始目录结构

4.2 改造src/main.ts

1.需要将原有的createApp更换为createSSRApp
2.同时导出一个函数创建App，删除挂载代码，最终代码如下：

import App from './App.vue'

import { createSSRApp } from 'vue'

export function createApp() {
  if (import.meta.env.SSR) {
    // ... 仅在服务端执行的逻辑
  }

  return createSSRApp(App)
}

4.3 新增 客户端 启动 文件 src/entry–client.ts

客户端入口在浏览器执行，需要挂载应用

import { createApp } from './main'

createApp().mount('#app')

4.4 新增 服务端 启动 文件 src/entry–server.ts

服务端导出 r ender 函数将应用渲染为字符串返回

import { renderToString } from 'vue/server-renderer'

import { createApp } from './main'

const render = async (url: string) =&gt; {
  const app = createApp()

  const html = await renderToString(app)
  return html
}
export {
  render
}

4.5 新增SSR启动 文件 server.js

使用 node server启动服务

import fs from "fs"
import path from "path"
import { fileURLToPath } from "url"
import express from "express"
import { createServer as createViteServer } from "vite"

const __dirname = path.dirname(fileURLToPath(import.meta.url))

async function createServer() {
  const app = express()

  // 以中间件模式创建 Vite 应用
  const vite = await createViteServer({
    server: { middlewareMode: true },
    appType: "custom"
  })

  // 使用 vite 的 Connect 实例作为中间件
  app.use(vite.middlewares)

  app.use("/", async (req, res, next) =&gt; {
    const url = req.originalUrl

    try {
      // 1. 读取 index.html
      let template = fs.readFileSync(
        path.resolve(__dirname, "index.html"),
        "utf-8"
      )

      // 2. 应用 Vite HTML 转换
      template = await vite.transformIndexHtml(url, template)

      // 3. 加载服务器入口
      const { render } = await vite.ssrLoadModule("/src/entry-server.ts")

      // 4. 渲染应用的 HTML
      const appHtml = await render(url)

      // 5. 注入渲染后的应用程序 HTML 到模板中。
      const html = template.replace("<!--ssr-outlet--&gt;", appHtml)

      // 6. 返回渲染后的 HTML。
      res.status(200).set({ "Content-Type": "text/html" }).end(html)
    } catch (e) {
      // 捕获到错误，让 Vite 来修复堆栈
      vite.ssrFixStacktrace(e)
      next(e)
    }
  })


  app.listen(5173, () =&gt; {
    console.log("SSR 渲染服务器启动成功 => http://localhost:5173/")
  })
}

createServer()

4.6 项目 package.json 配置

1.依赖包安装

  "dependencies": {
    "express": "^4.18.1",
    "vue": "^3.2.37",
    "path": "^0.12.7",
    "vue-class-component": "^8.0.0-rc.1",
    "vue-property-decorator": "^10.0.0-rc.3"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^18.7.16",
    "@vitejs/plugin-vue": "^3.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }

2.脚本命令

  "scripts": {
    "?dev": "CSR 渲染方式启动开发",
    "dev": "vite serve",
    "?dev:ssr": "SSR 渲染方式启动开发",
    "dev:ssr": "node server",
    "?build": "普通编译",
    "build": "vue-tsc --noEmit &amp;&amp; vite build",
    "?build:ssr": "SSR 模式编译",
    "build:ssr": "yarn build:client &amp;&amp; yarn build:server",
    "build:client": "vite build --outDir dist/client",
    "build:server": "vite build --outDir dist/server --ssr src/entry-server.ts",
    "preview": "vite preview"
  },