教你使用 koa2 + vite + ts + vue3 + pinia 构建前端 SSR 企业级项目

复制代码到这里我们就已经在 开发环境 已经正常的渲染了，但我们想一下，在

生产环境 我们应该怎么做呢，因为咱们不可能直接在 生产环境 运行使用 vite 吧！所以咱们接下来处理如何在 生产环境 运行吧六、添加开发环境为了将 SSR 项目可以在生产环境运行，我们需要：正常构建生成一个

客户端构建包；再生成一个 SSR 构建，使其通过 require() 直接加载，这样便无需再使用 Vite 的 ssrLoadModule；修改 package.json... { "scripts"

: { // 开发环境"dev": "node server-dev.js", // 生产环境"server": "node server-prod.js", // 构建"build"

: "pnpm build:client && pnpm build:server", "build:client": "vite build --outDir dist/client",

"build:server": "vite build --ssr src/entry-server.js --outDir dist/server", }, } ... 复制代码修改 server.js

为 server-dev.js运行 pnpm run build 构建包新增 server-prod.js注意：为了处理静态资源，需要在此新增 koa-send 中间件： pnpm i koa-send --save

const Koa = require(koa); const sendFile = require(koa-send); const path = require(path); const fs =

require(fs); const resolve = (p) => path.resolve(__dirname, p); const clientRoot = resolve(dist/client

); const template = fs.readFileSync(resolve(dist/client/index.html), utf-8); const render = require(./dist/server/entry-server.js

).render; const manifest = require(./dist/client/ssr-manifest.json); (async () => { const app =

new Koa(); app.use(async (ctx) => { // 请求的是静态资源if (ctx.path.startsWith(/assets)) {

await sendFile(ctx, ctx.path, { root: clientRoot }); return; } const [ appHtml ] =

await render(ctx, manifest); const html = template .replace(, appHtml

); ctx.type = text/html; ctx.body = html; }); app.listen(8080, () => console

.log(started server on http://localhost:8080)); })(); 复制代码到这里，我们在 开发环境 和 生成环境 已经都可以正常访问了，那么是不是就万事无忧了呢？

为了用户的更极致的用户体验，那么 预加载 就必须要安排了七、预加载我们知道 vue 组件在 html 中渲染时都是动态去生成的对应的 js 和 css 等；那么我们要是在用户获取 服务端模板 (也就是执行

vite build 后生成的 dist/client 目录) 的时候，直接在 html 中把对应的 js 和 css 文件预渲染了，这就是 静态站点生成（SSG） 的形式闲话少说，明白道理了之后，直接开干 ~。

生成预加载指令：在 package.json 中的 build:client 添加 --ssrManifest 标志，运行后生成 ssr-manifest.json... { "scripts": { ...

"build:client": "vite build --ssrManifest --outDir dist/client", ... }, } ... 复制代码在 entry-sercer.ts

中添加解析生成的 ssr-manifest.json 方法exportconst render = async ( ctx: ParameterizedContext, manifest: Record<

string, string[]> ): Promise => { const { app } = createApp(); console.log(ctx, manifest, );

const renderCtx: { modules?: string[] } = {}; const renderedHtml = await renderToString(app, renderCtx);

const preloadLinks = renderPreloadLinks(renderCtx.modules, manifest); return [renderedHtml, preloadLinks]; };

/** * 解析需要预加载的链接 * @param modules * @param manifest * @returns string */functionrenderPreloadLinks

( modules: undefined | string[], manifest: Record ): string{ let links = ;

const seen = new Set(); if (modules === undefined) thrownewError(); modules.forEach((id) => {

const files = manifest[id]; if (files) { files.forEach((file) => {

if (!seen.has(file)) { seen.add(file); links += renderPreloadLink(file); } }); } });

return links; } /** * 预加载的对应的地址 * 下面的方法只针对了 js 和 css，如果需要处理其它文件，自行添加即可 * @param file * @returns string */

functionrenderPreloadLink(file: string): string{ if (file.endsWith(.js)) { return``; } elseif (file.endsWith(.css)) { return``

; } else { return ; } } 复制代码给 index.html 添加 标记改造 server-prod.js ... (async () => { const app = new Koa(); app.use(async (ctx) => { ... const [appHtml, preloadLinks] = await render(ctx, manifest); const html = template .replace(

, preloadLinks) .replace(, appHtml); // do something }); app.listen(8080, () => console.log(started server on http://localhost:8080)); })(); 复制代码

运行 pnpm run build && pnpm run serve 就可正常显示了到这里基本的渲染就完成了，因为我们是需要在浏览器上渲染的，所以 路由 vue-router 就必不可少了八、集成 vue-router

安装 vue-routerpnpm i vue-router --save 复制代码新增对应的路由页面 index.vue 、 login.vue 、 user.vue新增 src/router/index.ts

import { createRouter as createVueRouter, createMemoryHistory, createWebHistory, Router }

fromvue-router; exportconst createRouter = (type: client | server): Router => createVueRouter({ history:

type === client ? createWebHistory() : createMemoryHistory(), routes: [ { path:

/, name: index, meta: { title: 首页, keepAlive:

true, requireAuth: true }, component: () =>import

(@/pages/index.vue) }, { path: /login, name:

login, meta: { title: 登录, keepAlive: true, requireAuth:

false }, component: () =>import(@/pages/login.vue) }, { path:

/user, name: user, meta: { title: 用户中心, keepAlive:

true, requireAuth: true }, component: () =>import

(@/pages/user.vue) } ] }); 复制代码修改入口文件 src/enter-client.tsimport { createApp }

from./main; import { createRouter } from./router; const router = createRouter(client); const { app } = createApp(); app.use(router); router.isReady().then(

() => { app.mount(#app, true); }); 复制代码修改入口文件 src/enter-server.ts... import { createRouter } from

./routerconst router = createRouter(client); exportconst render = async ( ctx: ParameterizedContext, manifest: Record<

string, string[]> ): Promise => { const { app } = createApp(); // 路由注册const

router = createRouter(server); app.use(router); await router.push(ctx.path); await router.isReady(); ... }; ... 复制代码

运行 pnpm run build && pnpm run serve 就可正常显示了九、集成 pinia安装pnpm i pinia --save 复制代码新建 src/store/user.tsimport

{ defineStore } frompinia; exportdefault defineStore(user, { state: () => { return { name:

张三, age: 20 }; }, actions: { updateName(name: string) {

this.name = name; }, updateAge(age: number) { this.age = age; } } }); 复制代码

新建 src/store/index.tsimport { createPinia } frompinia; import useUserStore from./user; exportdefault

() => { const pinia = createPinia(); useUserStore(pinia); return pinia; }; 复制代码新建 UsePinia.vue

使用，并且在 pages/index.vue 中引入

欢迎使用vite+vue3+ts+pinia+vue-router4