vuessr

最新推荐文章于 2025-12-09 14:55:59 发布

原创最新推荐文章于 2025-12-09 14:55:59 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该文演示了一个基本的VueSSR（Server-SideRendering）项目的设置过程，包括安装Vue、vue-server-renderer和Express库，创建服务端入口文件server.js，配置Express处理静态资源，以及使用Vuerenderer生成服务器端渲染的HTML响应。

下面是一个简单的Vue SSR项目示例：
1. 安装依赖
```
npm install vue vue-server-renderer express
```
2. 创建服务端入口文件 server.js
```javascript
const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
// 创建Express实例
const app = express()
// 处理静态资源请求
app.use(express.static(__dirname + '/public'))
// 服务器路由处理逻辑，返回经过渲染后的HTML字符串给客户端
app.get('*', (req, res) => {
  const vm = new Vue({
    template: '<div>Hello World</div>'
  })
  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return 
    }