Vite与Vue 3的SSR实践_vue3 vite ssr-CSDN博客

本文链接：https://blog.csdn.net/weixin_47000834/article/details/138223217

Vite是一个基于ES模块的构建工具，提供了快速的开发体验。Vue 3是一套用于构建用户界面的渐进式JavaScript框架。

Vite与Vue 3的结合可以实现服务器端渲染（SSR）的应用。以下是一个Vite与Vue 3的SSR实践的示例：

创建一个新的Vue 3项目，可以使用Vue CLI等工具来创建。
安装Vite作为项目的构建工具，可以使用npm或yarn来安装。

npm install -g create-vite
create-vite my-app --template vue
cd my-app

安装Vue 3的相关依赖。

npm install vue@next @vue/server-renderer@next

在Vite配置文件vite.config.js中，启用服务器端渲染。

// vite.config.js
const { createVuePlugin } = require('vite-plugin-vue2')
const { createSSRApp } = require('vue')
const { svelte } = require('vite-plugin-svelte')

module.exports = {
  plugins: [
    createVuePlugin(), // 启用Vue插件
    svelte() // 启用Svelte插件
  ],
  ssr: {
    external: ['vue'], // 指定需要外部化的模块
    configureServer: [createSSRApp] // SSR相关设置
  }
}

创建一个服务器端入口文件src/entry-server.js，用于创建Vue应用的实例，并输出一个函数来处理每个请求。

// src/entry-server.js
import { createSSRApp } from 'vue'
import App from './App.vue'

export async function createApp() {
  const app = createSSRApp(App)
  // ...其他的设置
  return app
}

创建一个客户端入口文件src/entry-client.js，用于挂载Vue应用到DOM中。

// src/entry-client.js
import { createApp } from './entry-server.js'

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

创建一个服务器入口文件src/entry.js，用于创建一个Express服务器，并处理每个请求。

// src/entry.js
import { createSSRApp } from 'vue'
import express from 'express'
import { renderToString } from '@vue/server-renderer'

import { createApp } from './entry-server.js'

const app = express()

app.get('*', async (req, res) => {
  const { app, router, store } = createApp()
  router.push(req.url)
  await router.isReady()

  const appContent = await renderToString(app)

  res.send(`
    <html>
      <body>
        ${appContent}
      </body>
    </html>
  `)
})

app.listen(3000, () => {
  console.log('Server started at http://localhost:3000')
})

在package.json中添加一个自定义的命令来启动服务器。

{
  "scripts": {
    "dev:server": "node src/entry.js"
  }
}

运行命令来启动服务器。

npm run dev:server

这样，就可以在本地的3000端口启动一个服务器端渲染的Vue 3应用了。