vite+vue3做预渲染

使用 Vite 和 Vue 3 进行预渲染非常简单。下面是一个基本的示例：

1. 安装 `vite-plugin-ssr` 和 `@vue/server-renderer`：

   npm install vite-plugin-ssr @vue/server-renderer

2. 在 `vite.config.js` 中添加插件：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import ssr from 'vite-plugin-ssr'

   export default defineConfig({
     plugins: [
       vue(),
       ssr()
     ]
   })

3. 创建一个 `src/entry-server.js` 文件，用于创建 Vue 3 实例并渲染：

   import { createApp } from 'vue'
   import App from './App.vue'

   export function createAppContext() {
     const app = createApp(App)
     return {
       app,
       router: app._router
     }
   }

   export async function render(url, context) {
     const { app } = createAppContext()
     app._router.push(url)

     await app.$router.isReady()

     const html = await context.renderToString()

     return html
   }

4. 创建一个 `src/entry-client.js` 文件，用于挂载 Vue 3 实例：

   import { createApp } from 'vue'
   import App from './App.vue'

   const app = createApp(App)
   app.mount('#app')

5. 创建一个 `src/App.vue` 文件，其中包含需要预渲染的内容：

   <template>
     <div>
       <h1>{{ title }}</h1>
       <p>{{ content }}</p>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         title: 'Hello, world!',
         content: 'This is some pre-rendered content.'
       }
     }
   }
   </script>

6. 运行 `npm run dev` 启动开发服务器。

7. 运行 `npm run build` 构建项目并生成预渲染的静态文件。

8. 预渲染的静态文件将生成在 `dist/client` 目录下，可以直接部署到服务器上。

以上就是使用 Vite 和 Vue 3 进行预渲染的基本流程。你可以根据自己的需要进行修改和扩展。