初学入门！基于vue/cli完成服务端渲染，小白15分钟也能学会！

2023-10-03 04:31:34

前言

在前端开发中，单页应用(SPA)的流行让前端开发变得更加高效和便捷。然而，SPA也存在一些固有的问题，其中之一就是对搜索引擎优化(SEO)的不友好。这是因为SPA在首次加载时，页面内容是空的，需要等到JavaScript加载并执行后，内容才会被渲染出来。这对于搜索引擎来说是一个很大的挑战，因为它无法抓取到这些动态渲染的内容。

为了解决这个问题，服务端渲染(SSR)应运而生。SSR是一种技术，它允许你在服务器端渲染你的应用程序，并在初始页面加载时将完全渲染的HTML发送给浏览器。这使得搜索引擎能够抓取到你的内容，并将其包含在搜索结果中。

准备工作

在开始之前，你需要确保你已经安装了以下软件：

Node.js
Vue CLI
一个文本编辑器（如VSCode、Sublime Text或Atom）

如果你还没有安装这些软件，请先进行安装。

使用Vue CLI创建项目

打开终端或命令提示符，并导航到你想要创建项目的位置。
运行以下命令来创建一个新的Vue项目：

vue create my-ssr-app

选择你想要的项目配置选项。在大多数情况下，你可以选择默认选项。

添加服务端渲染

一旦你的项目创建成功，你就可以添加服务端渲染功能了。为此，你需要安装以下包：

npm install @vue/server-renderer

然后，你需要在你的项目的vue.config.js文件中添加以下配置：

module.exports = {
  // ...其他配置
  configureWebpack: {
    plugins: [
      new ServerRendererPlugin()
    ]
  }
};

创建服务端入口文件

接下来，你需要创建一个服务端入口文件。这个文件将负责在服务器端渲染你的应用程序。你可以将它命名为server-entry.js，并将其放在项目的src文件夹中。

// server-entry.js
import { createApp } from './App.vue'

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

  return app.mount('#app')
}

配置服务端

现在，你需要配置你的服务端。为此，你需要在项目的package.json文件中添加以下脚本：

{
  // ...其他脚本
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:ssr": "vue-cli-service build --target server",
    "start:ssr": "node dist/server-bundle.js"
  }
}