Vue服务端渲染 SSR：自定义开发指南，简单三步构建SSR应用

前端

2023-12-08 00:59:32

在上一篇文章中，我们介绍了服务器端渲染和一些Nuxt.js的概念。现在，我们就Vue SSR方面，从基础开始，分低、中、高三个层面，来手写实现下传说中的服务端渲染。

在正式搭建项目之前，我们还是要回顾下vue服务器端渲染的一些特性。

Vue服务器端渲染的特点

无需SEO优化： 服务端渲染可以将Vue组件预渲染成静态HTML，从而无需担心SEO优化，因为搜索引擎可以直接抓取和索引这些静态HTML。
首屏加载速度快： 由于服务端渲染可以将Vue组件预渲染成静态HTML，所以首屏加载速度会非常快，这对于用户体验非常重要。
更好的浏览器兼容性： 服务端渲染可以确保应用程序在所有浏览器中都能正常工作，即使是那些不支持Vue.js的浏览器。
可扩展性和安全性： 服务端渲染可以提高应用程序的可扩展性和安全性，因为它可以将应用程序的业务逻辑与前端代码分离。

了解了Vue服务器端渲染的特性后，我们就可以开始搭建项目了。

搭建项目

1. 创建项目

首先，我们需要创建一个新的Vue项目。我们可以使用Vue CLI脚手架来快速创建项目。

vue create vue-ssr

2. 安装必要的依赖

接下来，我们需要安装一些必要的依赖。

npm install vue-server-renderer @vue/cli-plugin-ssr

3. 配置Vue CLI

接下来，我们需要在Vue CLI中配置SSR插件。

在vue.config.js文件中，添加如下代码：

module.exports = {
  // ...
  plugins: [
    '@vue/cli-plugin-ssr'
  ],
  // ...
}

4. 创建服务端代码

现在，我们需要创建服务端代码。

在src文件夹中，创建一个新的文件server.js。

const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('*', (req, res) => {
  const app = new Vue({
    data: {
      msg: 'Hello, world!'
    },
    template: `<div>{{ msg }}</div>`
  })

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

    res.end(html)
  })
})

app.listen(3000)