超详细！！vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript

vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript

注意
注意
注意：本文章所有例举内容，页面均为纯静态页面，没有任何ajax请求，例子适用官方网站等不需要动态渲染的网站，至于能不能依葫芦画瓢应用在带ajax的页面上，这里没做验证

例子采用的各种环境版本：
node版本为：v14.15.0（node -v）
npm版本为：6.14.8（npm -v）
@vue/cli 4.5.6（vue -V）

举个例子，这里我创建一个标准的vue cli项目

1 . 安装 prerender-spa-plugin

详细官方文档也可以参考：链接1npm、链接2gitHub

在vscode编辑器里，打开（ git ）终端，输入

npm install --save prerender-spa-plugin

（网上很多说，如果不是科学上网，会出现报错的问题，但我这里是没有报错的）
报错的话是prerender-spa-plugin中有puppeteer可能会报错

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

此时可以试试淘宝镜像安装

cnpm install --save prerender-spa-plugin puppeteer

不过还是建议科学上网下载，没那么多P事

2 . 配置

（配置非常重要，配置不好的话就会打包报错，或者打包完之后页面无法跳转等）

步骤1

首先找到 build目录下的 webpack.prod.conf.js 文件

把这两句话粘进去

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

然后再看这个文件里的代码，找到 plugins 数组

把下面这段代码，找个喜欢的地方，塞到 plugins 数组里

new PrerenderSPAPlugin({
    
    
      // 生成文件的路径，也可以与webpakc打包的一致。
      // 下面这句话非常重要！！！
      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, "../dist"),
      // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
      routes: [
        "/htmlPageWrap1",
        "/htmlPageWrap2",
        "/htmlPageWrap3",
      ],
      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderAfterElementExists: true,
      captureAfterTime: 50000,
      renderer: new Renderer({
    
    
        inject: {
    
    
          foo: "bar"
        },
        // 这个要选false，这样你在打包的时候，会看到一个浏览器调试器会闪出大约1-2秒的时间
        // 如果你发现这个浏览器调试器，出现之后，一直不消失，打包进度也一直不动，也不报错，那恭喜你，你有什么地方出错了
        // 这个地方非常坑，出错了不会提示你，提示你的东西不是栈溢出，就是什么少 > 符号，根本不是你出错的地方
        // 这时你可能要重新好好检查一下你什么地方出错了
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        renderAfterDocumentEvent: "render-event"
      })
    })

步骤2

接下来在main.js中配置这段代码，粘进去放在最下面就行了

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

步骤3

把router下的index.js变更为mode: "history"，变更之后正常启动的本地服务可能无法正常跳转，但是打包之后的是可以的

2 . 配置SEO

详细官方文档也可以参考：链接npm

这个东西下载一下配置一下就很简单了
首先下载依赖包

npm install vue-meta-info --save

然后再main.js配置这句话

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

接下来在你想要配置seo的主页面进行配置就行了，MetaInfo的更多配置项，自己去文档看看

接下来直接 build 打包就行了

打包完成之后去dist目录下用git起一个http服务试验一下

http-server是要下载依赖的，教程链接：链接

启动之后F12看看mate标签

这样就结束了