博客

手把教你搭建ssr(vue/vue-cli+express)

  • Post category:other

以下是手把手教你搭建 SSR（Vue/Vue-cli+Express）的完整攻略，包含了详细的步骤和示例说明。

什么是 SSR？

SSR（Server-Side Rendering）是指在服务器端将动态页面渲染成 HTML 后再返回给客户端，而不是在客户端使用 JavaScript 动态生成页面。SSR 可以提高页面的首屏加载速度和 SEO 优化效果。

搭建 SSR 的步骤

步骤1：创建 Vue 项目

首先，我们需要创建一个 Vue 项目。可以使用 Vue-cli 来创建一个基本的 Vue 项目。在终端中执行以下命令：

vue create my-ssr-app

这将创建一个名为 my-ssr-app 的 Vue 项目。

步骤2：安装 SSR 相关依赖

接下来，我们需要安装 SSR 相关的依赖。在终端中执行以下命令：

cd my-ssr-app
npm install --save vue-server-renderer express

其中，vue-server-renderer 是 Vue 的服务端渲染模块，express 是一个 Node.js 的 Web 框架。

步骤3：创建服务器端代码

接下来，我们需要创建服务器端代码。在项目根目录下创建一个名为 server.js 的文件，并添加以下代码：

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

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

这段代码创建了一个 Express 服务器，并使用 vue-server-renderer 模块的 createRenderer 方法创建了一个渲染器。在服务器端代码中，我们创建了一个 Vue 实例，并将访问的 URL 传递给了 Vue 实例。然后，我们使用渲染器的 renderToString 方法将 Vue 实例渲染成 HTML，并将 HTML 返回给客户端。

步骤4：修改 Vue 代码

接下来，我们需要修改 Vue 代码，以便在服务器端渲染时使用。在 src 目录下创建一个名为 entry-server.js 的文件，并添加以下代码：

import Vue from 'vue'
import App from './App.vue'

export default context => {
  const app = new Vue({
    render: h => h(App, { props: { url: context.url } })
  })
  return app
}

这段代码创建了一个 Vue 实例，并将 App 组件作为根组件。在服务器端渲染时，我们将访问的 URL 传递给了根组件。

接下来，在 src 目录下创建一个名为 entry-client.js 的文件，并添加以下代码：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

这段代码创建了一个 Vue 实例，并将 App 组件作为根组件。在客户端渲染时，我们将根组件挂载到了 #app 元素上。

步骤5：修改入口文件

最后，我们需要修改入口文件 main.js，以便在服务器端和客户端都可以使用。在 main.js 中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import createApp from './entry-server'

Vue.config.productionTip = false

export default context => {
  const { app } = createApp(context)
  return app
}

if (typeof window !== 'undefined') {
  new Vue({
    render: h => h(App)
  }).$mount('#app')
}

这段代码导出了一个函数，用于在服务器端渲染时创建 Vue 实例。在客户端渲染时，我们直接创建了一个 Vue 实例。

示例1：在 Vue 组件中使用服务器端传递的数据

在服务器端渲染时，我们可以将数据传递给 Vue 组件。在 App.vue 组件中添加以下代码：

<template>
  <div>
    <h1>Hello, SSR!</h1>
    <p>访问的 URL 是： {{ url }}</p>
  </div>
</template>

<script>
export default {
  props: ['url']
}
</script>

这段代码在 App.vue 组件中定义了一个 url 属性，并在模板中使用了这个属性。

示例2：使用 Vuex 管理状态

在服务器端渲染时，我们可以使用 Vuex 管理状态。在 store.js 文件中添加以下代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

这段代码创建了一个 Vuex 的 store，并定义了一个 count 状态和一个 increment mutation。

在 entry-server.js 文件中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import createApp from './entry-server'
import store from './store'

Vue.config.productionTip = false

export default context => {
  const { app } = createApp(context)
  store.state.count = 10 // 设置初始状态
  return app
}

这段代码在服务器端渲染时，将 count 状态设置为了 10。

在 App.vue 组件中添加以下代码：

<template>
  <div>
    <h1>Hello, SSR!</h1>
    <p>访问的 URL 是： {{ url }}</p>
    <p>count: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  props: ['url'],
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>

这段代码在 App.vue 组件中使用了 mapState 和 mapMutations 辅助函数，将 count 状态和 increment mutation 映射到了组件的计算属性和方法中。

结论

以上就是手把手教你搭建 SSR（Vue/Vue-cli+Express）的完整攻略。通过这个攻略，你可以了解到如何搭建一个基本的 SSR 应用，并在其中使用服务器端传递的数据和 Vuex 状态管理。

Tags: