h5/
├── src/                   # 源代碼目錄
│   ├── assets/            # 靜態(tài)資源文件
│   ├── page/              # 頁面組件
│   ├── use/               # 自定義 hooks
│   ├── app.ts             # 應(yīng)用創(chuàng)建邏輯
│   ├── main.ts            # 客戶端入口文件
│   └── server.ts          # SSR 渲染邏輯
├── server.ts              # 服務(wù)端入口文件 (Bun 服務(wù)器)
├── vite.config.ts         # Vite 配置
├── package.json           # 項(xiàng)目配置和依賴
└── 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) {
  // 在服務(wù)器端和客戶端都設(shè)置head數(shù)據(jù)
  head.value = init
  
  // 只在客戶端環(huán)境中操作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服務(wù)器)
import { serve, file } from 'bun'

serve({
  port: 3000,
  async fetch(req) {
    let url = new URL(req.url)
    // 處理靜態(tài)資源
    if (url.pathname.startsWith('/assets')) {
      // 靜態(tài)資源處理邏輯...
    }
    // 渲染Vue應(yīng)用
    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: '關(guān)于我們-ssr,全?？蚣?,
    keyword: '關(guān)于我們,ssr,全?？蚣?,
    description: '關(guān)于我們-ssr,全?？蚣?
  })
}

// 在客戶端和服務(wù)端都執(zhí)行
init()

// 僅在服務(wù)端渲染時(shí)執(zhí)行，確保元信息正確設(shè)置
onServerPrefetch(() => {
  init()
})
</script>

# 開發(fā)模式（CSR）
npm run dev

# 服務(wù)端渲染構(gòu)建和運(yùn)行
npm run ssr

# 構(gòu)建生產(chǎn)版本
npm run build

# 預(yù)覽生產(chǎn)構(gòu)建結(jié)果
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 構(gòu)建中被正確處理
  },
  build: {
    assetsInlineLimit: 0  // 禁用資源內(nèi)聯(lián)
  }
})

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

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

bun install

bun run build

bun run ssr