返回

深入浅出：掌握Vue.js同构渲染 - 分步指南第二篇

前端

从零开始的Vue.js同构渲染指南（二） - 一个简单的同构DEMO

在上一篇文章中，我们介绍了如何从零开始搭建一个简单的client-only webpack配置。现在，让我们在前一篇文章的基础上编写一个简单的前后端同构的DEMO。

首先，改写app.js，将其中创建Vue实例的部分改写成一个工厂函数，用于创建并返回Vue实例。因为服务器渲染的配置和客户端渲染的配置有所不同，所以我们需要将Vue实例的创建过程抽象出来，以便在不同环境中复用。

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

// 创建 Vue 实例的工厂函数
export function createApp() {
  return new Vue({
    render: h => h(App)
  })
}

接下来，我们需要在服务器端设置Node.js和Express。首先，安装必要的依赖项：

npm install express vue-server-renderer

然后，创建一个新的JavaScript文件server.js，并在其中编写服务器端代码：

// server.js
import express from 'express'
import { createApp } from './app'

const app = express()
const port = 3000

// 渲染函数
const render = (req, res) => {
  const vueApp = createApp()

  // 将 Vue 实例渲染为 HTML
  const html = vueApp.$mount()

  // 将 HTML 发送给客户端
  res.send(html)
}

// 监听端口
app.get('/', render)
app.listen(port)

现在，我们已经设置好了服务器端。接下来，我们需要修改webpack配置，以支持服务器端渲染。在webpack.config.js文件中，添加以下配置：

// webpack.config.js
// ...

module.exports = {
  // ...

  // 为服务器端渲染提供 target: 'node' 选项
  target: 'node',

  // ...
}

最后，运行以下命令来启动服务器：

npm run serve

服务器启动后，您就可以访问http://localhost:3000来查看同构渲染的应用了。

总结

本文中，我们介绍了如何从零开始搭建一个简单的Vue.js同构渲染应用。我们逐步解释了如何在Node.js和Express中设置服务器端渲染。通过本篇文章，您已经对同构渲染的概念有了更深入的理解，并提升了您的JavaScript和全栈开发技能。