为你的 Vue 项目注入 SSR 之魂——@vue/cli3 插件开发全攻略

2023-11-28 10:30:32

在第一篇文章《基于 @vue/cli3 与 koa 创建 ssr 工程》中，我们详细讲解了如何基于 @vue/cli3 创建一个 ssr 工程，让你的 Vue 项目能够同时兼顾前端与后端渲染，为用户带来更加极致的体验。然而，对于想要快速集成 SSR 功能的开发者来说，还需要一一配置服务器端代码，这无疑增加了开发的复杂度。

为了简化开发流程，本篇文章将带领你创建 @vue/cli3 插件，并将第一篇文章中 ssr 工程的服务器端部分整合进插件中，让你能够轻松地将 SSR 功能集成到你的 Vue 项目中，无需再担心繁琐的配置与搭建。同时，你将有机会更深入地了解 SSR 的实现原理，从而为你的前端项目开发之旅增添更加扎实的技术储备。

插件开发之旅的序章

在开始创建插件之前，我们先来了解一下什么是 @vue/cli3 插件。@vue/cli3 插件是一种扩展 Vue CLI 功能的工具，它允许你自定义 CLI 的行为，添加新的命令或脚手架模板。通过插件，你可以让 Vue CLI 更加契合你的项目需求，提高开发效率。

创建你的专属 @vue/cli3 插件

现在，让我们开始创建属于你自己的 @vue/cli3 插件吧！

安装必要的依赖

首先，你需要安装 @vue/cli-plugin-webpack 和 webpack 等依赖项。你可以使用以下命令完成安装：
```
npm install @vue/cli-plugin-webpack webpack --save-dev
```
创建一个新的插件项目

接下来，你需要创建一个新的插件项目。你可以使用以下命令创建项目：
```
vue create my-ssr-plugin
```
在这个过程中，你将会被询问一些问题，例如项目的名称和要使用的包管理器。按照提示选择即可。
添加插件代码

插件项目创建完成后，你就可以开始添加插件代码了。在 src 目录下，创建一个名为 index.js 的文件，并添加以下代码：
```
module.exports = {
  extendWebpack(config) {
    config.devServer = {
      ...config.devServer,
      hot: false,
      inline: false,
      compress: true,
      port: 8080,
    };
  },
};
```
这段代码将配置 Webpack 的 devServer，使其支持 SSR。
发布你的插件

当你完成插件开发后，你可以使用以下命令发布你的插件：
```
npm publish
```
发布完成后，你就可以在其他项目中使用你的插件了。

将 SSR 功能整合进插件

现在，我们已经创建了一个 @vue/cli3 插件，接下来就让我们将第一篇文章中 ssr 工程的服务器端部分整合进插件中。

在插件中添加服务器端代码

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

const express = require('express');
const app = express();

app.use(require('vue-server-renderer').createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
}));

app.listen(8080);

这段代码将创建一个 Express 服务器，并使用 vue-server-renderer 来渲染 Vue 组件。

修改插件的 package.json 文件

在插件的 package.json 文件中，添加以下脚本：
```
"scripts": {
  "build": "webpack --config webpack.ssr.config.js",
  "start": "node server.js"
}
```
这两个脚本分别用于构建插件的服务器端代码和启动 Express 服务器。
在 Vue 项目中使用插件

在你想要集成 SSR 功能的 Vue 项目中，安装你的插件。你可以使用以下命令安装：
```
npm install my-ssr-plugin --save-dev
```
然后，在项目根目录下的 package.json 文件中，添加以下配置：
```
"vue": {
  "cliPlugins": [
    {
      "id": "my-ssr-plugin",
      "apply": "serve"
    }
  ]
}
```
这个配置将告诉 Vue CLI 在构建项目时使用你的插件。
运行项目

现在，你就可以运行你的 Vue 项目了。你可以使用以下命令运行：
```
npm run serve
```
项目运行后，你就可以访问 http://localhost:8080 来查看 SSR 生成的页面了。