vuessr

fuyouliangce

于 2023-03-28 09:31:03 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/fuyouliangce/article/details/129809345

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是一个简单的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 
    }