使用Vite+Vue3搭建前端SSR应用（二）搭建SSR服务端渲染

// vite.config.ts 中加入viteSSR插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import viteSSR from 'vite-ssr/plugin.js'

export default defineConfig({
  plugins: [
    viteSSR({
      build: {
        keepIndexHtml: true,
      },
    })
  ]
})
// 无关代码忽略

// src/route.ts 中删除多余代码直接导出routes即可
import routes from '~pages'
export { routes }

// src/main.ts
import '@/assets/index.less'
import App from './App.vue'
import { routes } from "./route"
import viteSSR, { ClientOnly } from 'vite-ssr'
import { createHead } from '@vueuse/head'
import { ApiBase } from './api/config/api.config'

const options = {
  routes: routes
}

// 导出viteSSR函数，vite-ssr只有一个入口，服务端和客户端共用一个端口，系统会自动完成环境区分
export default viteSSR(App, options, (context) => {
  const { app, router } = context

  const head = createHead()
  app.use(head)

  app.component(ClientOnly.name, ClientOnly)

  router.beforeEach(async (to: any, from: any, next: any) => {
    if (!!to.meta.state && Object.keys(to.meta.state).length > 0) {
      // 已经存在数据，不需要在请求了
      return next()
    }
    try {
      // 这里为了演示，直接请求固定路径的接口，正式环境，可根据路由匹配对应的后端接口
      console.log("router =>",to.name)
      // 这里的ApiBase需要根据环境判断，如果是SSR，则必须是全路径
      // export const ApiBase = import.meta.env.SSR ? "http://www.bitem.cn" : ""
      const res = await fetch(ApiBase + '/api/web/article/a8feb225-ae66-288a-5f21-0f9deafe6a80',
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        }
      )
      // 存储数据
      to.meta.state = await res.json()
    } catch (error) {
      // 跳转错误页
      console.error(error)
    }
    next()
  })

  return { head }
})

// main.ts 只保留以下代码
import '@/assets/index.less'
import App from './App.vue'
import { routes } from "./route"
import viteSSR, { ClientOnly } from 'vite-ssr'
import { createHead } from '@vueuse/head'

const options = {
  routes: routes
}

export default viteSSR(App, options, (context) => {
  const { app } = context
  const head = createHead()
  app.use(head)
  app.component(ClientOnly.name, ClientOnly)
  return { head }
})

// src/api/init/about.ts
import { useContext } from 'vite-ssr'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { ApiBase } from '../config/api.config'

export async function getInitData() {
  const { initialState } = useContext()
  // 这只是一个唯一值，这里直接取路由的名称，也可以直接自定义，如：view-about 或者 component-helloworld
  const { name } = useRoute()
  const state = ref(initialState[name as string] || null)

  if (!state.value) {
    state.value = await (await fetch(ApiBase + '/api/web/article/a8feb225-ae66-288a-5f21-0f9deafe6a80')).json()
    // SSR需要将state的值赋值给initialState，这样任何地方都可以直接调用这个值，并且，如果不赋值的话服务端和客户端会请求两次数据造成浪费
    if (import.meta.env.SSR) {
      initialState[name as string] = state.value
    }
  }

  return state
}