已完成的vue3项目+vite做预渲染

预渲染可以提高网站的首屏加载速度和SEO优化效果，下面是使用Vue3和Vite实现预渲染的步骤：

1. 安装`vite-plugin-ssr`

npm install vite-plugin-ssr --save-dev

2. 在项目根目录下创建`server.js`文件，用于启动服务器和渲染页面

const { createServer } = require('vite')
const { createPageRender } = require('vite-plugin-ssr')

const isProduction = process.env.NODE_ENV === 'production'

async function start() {
  const vite = await createServer({
    mode: isProduction ? 'production' : 'development',
    configFile: isProduction ? 'vite.config.prod.js' : 'vite.config.js'
  })

  const renderPage = createPageRender({ vite })

  const server = vite.createServer()
  server.use(renderPage)
  server.listen(3000)
}

start()

3. 在`vite.config.js`或`vite.config.prod.js`中添加以下配置

import { createSSRApp } from 'vue'
import { resolve } from 'path'
import { readFileSync } from 'fs'
import viteSSR from 'vite-plugin-ssr'

export default {
  plugins: [
    viteSSR({
      // 生成的HTML文件输出目录，默认为dist/client
      outDir: 'dist',
      // 是否启用预渲染
      prerender: true,
      // 预渲染路由
      routes: ['/'],
      // 预渲染时使用的app实例
      render: () => createSSRApp(App),
      // 预渲染时需要加载的资源
      includedRoutes: [
        "/",
        "/about",
        "/contact"
      ],
      // 自定义模板，可选
      htmlTemplate: readFileSync(resolve(__dirname, 'public/index.html'), 'utf-8'),
      // 自定义输出文件名，可选
      fileName: (route) => `${route === '/' ? 'index' : route}.html`
    })
  ]
}

4. 运行`npm run build`命令进行打包，生成预渲染的HTML文件

5. 启动服务器，访问`http://localhost:3000`即可看到预渲染的页面

以上就是使用Vue3和Vite实现预渲染的步骤，希望对你有所帮助！