当前位置：首页 > VUE

实现 vue ssr

2026-02-09 23:09:03VUE

实现 Vue SSR 的基本步骤

安装必要依赖
需要安装 vue-server-renderer、express 和 vue。确保 vue 和 vue-server-renderer 版本一致。

npm install vue vue-server-renderer express

创建 Vue 实例和服务器入口文件

新建 app.js 文件，创建 Vue 实例。

const Vue = require('vue')
const app = new Vue({
  template: '<div>Hello SSR</div>'
})

新建 server.js 文件，配置 Express 服务器和 SSR 渲染器。

const express = require('express')
const { createRenderer } = require('vue-server-renderer')
const app = require('./app')

const server = express()
const renderer = createRenderer()

server.get('*', (req, res) => {
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

server.listen(8080)

使用 HTML 模板

创建 index.template.html 文件作为 HTML 模板。

<!DOCTYPE html>
<html>
<head>
  <title>Vue SSR</title>
</head>
<body>
  <!--vue-ssr-outlet-->
</body>
</html>

修改 server.js，引入模板文件。

const fs = require('fs')
const renderer = createRenderer({
  template: fs.readFileSync('./index.template.html', 'utf-8')
})

处理客户端激活

创建客户端入口文件 entry-client.js。

import { createApp } from './app'

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

创建服务器入口文件 entry-server.js。

import { createApp } from './app'

export default context => {
  return new Promise((resolve, reject) => {
    const app = createApp()
    resolve(app)
  })
}

配置 Webpack

安装 Webpack 相关依赖。

npm install webpack webpack-cli vue-loader vue-template-compiler babel-loader @babel/core @babel/preset-env css-loader -D

创建 webpack.client.config.js 和 webpack.server.config.js 分别配置客户端和服务端打包。

启动脚本配置

在 package.json 中添加启动脚本。

{
  "scripts": {
    "build": "npm run build:client && npm run build:server",
    "build:client": "webpack --config webpack.client.config.js",
    "build:server": "webpack --config webpack.server.config.js",
    "start": "node server.js"
  }
}