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

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

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

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

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

   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', '/co