vue2前后端分离项目使用prerender-spa-plugin 让搜索引擎抓取到静态页面详细教程

以下是使用 prerender-spa-plugin 实现前后端分离项目预渲染的详细步骤：

1. 安装依赖： 在项目根目录下执行以下命令安装 prerender-spa-plugin 插件及相关依赖：

   1 2	npm install prerender-spa-plugin prerender-spa-plugin-renderer puppeteer --save-dev

2. 创建一个配置文件： 在项目根目录下创建一个名为 prerender.config.js 的文件，用于配置 prerender-spa-plugin。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const PuppeteerRenderer = PrerenderSPAPlugin.PuppeteerRenderer;
 
module.exports = {
  // 需要预渲染的路由
  routes: ['/home', '/about', '/contact'],
  // 静态 HTML 文件输出目录
  staticDir: path.join(__dirname, 'dist'),
  // PrerenderSPAPlugin 插件配置
  plugins: [
    new PrerenderSPAPlugin({
      // 生成的静态文件的路径
      staticDir: path.join(__dirname, 'dist'),
      // 需要进行预渲染的路由
      routes: ['/home', '/about', '/contact'],
      // 使用 PuppeteerRenderer 渲染器
      renderer: new PuppeteerRenderer({
        // 渲染结果保存的文件夹
        // 这里假设生成的 HTML 文件放在 dist/prerendered 目录下
        renderAfterDocumentEvent: 'render-event',
        renderAfterTime: 5000,
        headless: true,
        // Puppeteer 渲染器的其他配置
      }),
    }),
  ],
};

在 routes 数组中添加需要预渲染的路由，配置 staticDir 为项目生成的静态文件目录。

3. 修改打包配置文件： 打开项目的打包配置文件（一般是 vue.config.js ），添加以下代码：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; module.exports = { // ...其他配置 configureWebpack: { plugins: [ // 使用 PrerenderSPAPlugin 插件 new PrerenderSPAPlugin({ // 生成的静态文件的路径 staticDir: path.join(__dirname, 'dist'), // 需要进行预渲染的路由 routes: ['/home', '/about', '/contact'], // 使用 PuppeteerRenderer 渲染器 renderer: new Renderer({ // 渲染结果保存的文件夹 // 这里假设生成的 HTML 文件放在 dist/prerendered 目录下 renderAfterDocumentEvent: 'render-event', renderAfterTime: 5000, headless: true, // Puppeteer 渲染器的其他配置 }), }), ], }, };

同样，在 routes 数组中添加需要预渲染的路由。

4. 添加预渲染事件： 在 Vue 组件的 mounted 钩子函数中，添加以下代码来触发预渲染事件：

   1 2 3

   mounted() { document.dispatchEvent(new Event('render-event')); },

这将在页面加载后触发 render-event 事件，使 prerender-spa-plugin 开始渲染页面。

5. 执行预渲染： 执行以下命令来生成预渲染的静态 HTML 文件：

   1 2	npm run build

此命令将在 dist 目录下生成预渲染的静态文件。
6. 部署静态文件： 将生成的预渲染的静态 HTML 文件部署到服务器上，确保服务器能够正确地响应对应的路由。

7. 验证预渲染： 在浏览器中访问预渲染的路由，查看页面源代码，应该能够看到完整的静态 HTML 内容。

通过以上步骤，即可使用 prerender-spa-plugin 实现前后端分离项目的预渲染，让搜索引擎能够抓取到静态页面。请注意，puppeteer 模块可能会较大且安装较慢，建议使用适合当前项目的 renderer。