Vue3+TypeScript+Vite服务端渲染项目的实现

h5/
├── src/                   # 源代码目录
│   ├── assets/            # 静态资源文件
│   ├── page/              # 页面组件
│   ├── use/               # 自定义 hooks
│   ├── app.ts             # 应用创建逻辑
│   ├── main.ts            # 客户端入口文件
│   └── server.ts          # SSR 渲染逻辑
├── server.ts              # 服务端入口文件 (Bun 服务器)
├── vite.config.ts         # Vite 配置
├── package.json           # 项目配置和依赖
└── index.html             # HTML 入口文件

// src/app.ts
import { createSSRApp } from 'vue'
import App from './App.vue'
import { createRouter, createMemoryHistory, createWebHistory } from 'vue-router'

export function createApp(ssr: boolean = false) {
  const app = createSSRApp(App)
  const routes = [
    { path: '/', component: () => import('./page/home.vue'), meta: { title: 'home' } },
    { path: '/about', component: () => import('./page/about.vue'), meta: { title: 'about' } },
  ]

  const router = createRouter({
    history: ssr ? createMemoryHistory() : createWebHistory(),
    routes,
  })

  app.use(router)
  return { app, router }
}

// src/use/head.ts
import { ref, type Ref, onMounted } from 'vue'

type HeadType = {
  title: string,
  keyword: string,
  description: string
}

export const head: Ref<HeadType> = ref({
  title: '',
  keyword: '',
  description: ''
})

export function useHead(init: HeadType) {
  // 在服务器端和客户端都设置head数据
  head.value = init
  
  // 只在客户端环境中操作DOM
  onMounted(() => {
    try {
      if (document.title !== init.title) {
        document.title = init.title
        document.head.querySelector('meta[name="keyword"]')?.setAttribute('content', init.keyword)
        document.head.querySelector('meta[name="description"]')?.setAttribute('content', init.description)
      }
    } catch (e) {
      console.log(e)
    }
  })
}

// src/server.ts
import { renderToString } from '@vue/server-renderer'
import { createApp } from './app'
import { head } from './use/head'

export async function render(url: string) {
  const { app, router } = createApp(true)
  const ctx = { 'head': head.value }
  router.push(url)
  await router.isReady()
  const html = await renderToString(app, ctx)
  return { html, ctx }
}

// server.ts (Bun服务器)
import { serve, file } from 'bun'

serve({
  port: 3000,
  async fetch(req) {
    let url = new URL(req.url)
    // 处理静态资源
    if (url.pathname.startsWith('/assets')) {
      // 静态资源处理逻辑...
    }
    // 渲染Vue应用
    const render = (await import('./dist/server/server.js')).render
    const html = await file('./dist/client/index.html').text()
    const rendered = await render(url.pathname)
    return new Response(
      html
        .replace('<!--app-html-->', rendered.html)
        .replace('<!--app-head-html-->', rendered.ctx.head.title)
        .replace('<!--app-head-keyword-->', rendered.ctx.head.keyword)
        .replace('<!--app-head-description-->', rendered.ctx.head.description),
      {
        headers: { 'Content-Type': 'text/html' }
      }
    )
  }
})

// 页面组件示例 (home.vue)
<script lang="ts" setup>
import { onServerPrefetch } from 'vue'
import { useHead } from '../use/head'

const init = () => {
  useHead({
    title: '关于我们-ssr,全栈框架',
    keyword: '关于我们,ssr,全栈框架',
    description: '关于我们-ssr,全栈框架'
  })
}

// 在客户端和服务端都执行
init()

// 仅在服务端渲染时执行，确保元信息正确设置
onServerPrefetch(() => {
  init()
})
</script>

# 开发模式（CSR）
npm run dev

# 服务端渲染构建和运行
npm run ssr

# 构建生产版本
npm run build

# 预览生产构建结果
npm run preview

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  ssr: {
    noExternal: ['vue']  // 确保 Vue 在 SSR 构建中被正确处理
  },
  build: {
    assetsInlineLimit: 0  // 禁用资源内联
  }
})

// src/main.ts
import { createApp } from './app'

const { app } = createApp()
app.mount('#app')

bun install

bun run build

bun run ssr