主要的库：prerender-spa-plugin （注意必须要用history的路由模式）

先下载 ：

npm i prerender-spa-plugin -S

然后在vue.config.js添加配置..

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

module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV !== "production") return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 输出目录
          staticDir: path.join(__dirname, "dist"),
          // 打包的路由
          routes: ["/", "/mood","/bookInfo/id"],
          renderer: new Renderer({
            inject: {
              foo: "bar"
            },
            headless: false
          })
        })
      ]
    };
  }
};

如果vue-cli的版本比较老的（暴漏了webpack相关配置）

需要在build/webpack.prod.conf.js中进行配置：

找到plugins （是个array 把新增PrerenderSPAPlugin的配置加进去。。。）

plugins:[
    // 新增 PrerenderSPAPlugin
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, "../dist"),
      // Required - Routes to render.
      routes: ["/", "/mood"],
      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
        ignoreJSErrors: true,
        inject: {
          foo: "bar"
        },
        headless: false,
        renderAfterTime: 5000
      })
    })
]

然后在最外层的main.js中添加：

new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>",

  // 添加
  mounted() {
    document.dispatchEvent(new Event("custom-render-trigger"));
  }
});

配置完成了之后 直接打包..

npm run build

打包成功之后 dist目录下会出现两个新的目录 正常打开

可能会报错，一般报错就是资源路径的问题，需要把./static 换成../static 就可以了

好了到了这一步感觉大功告成了，

然后一个天坑来了：

prerender-spa-plugin不支持动态路由

啥意思呢，举个例子

我们的博客文章 的url是动态的带id的：http://biaoblog.cn/#/bookInfo/1641975877316

那么使用prerender预加载是没办法动态打包了，

当然也有一个很极限的实现方法：

下面的内容是引用一个github主的：

我弄了个 blingshow——中国路灯制造网，但是我是用vue+ts写的，写之前没考虑什么SEO等等，以前一直写后台管理系统，直接面向用户的网站只写过一个，就是雀巢桶装水，不过那个是jsp写的，而且记得当初上线前当时的老大让我加了段代码，说是给百度SEO用的，好像花钱的，这次自己独立建个小站，写完后才意识到百度收录、SEO等等问题，这是以前没接触过的，纯给自己埋坑了。

以前也听过预渲染这个名词，不过一直没在意，这次为了解决我网站SEO相关问题，不得不去研究下。好在vue官网直接给了推荐：https://github.com/chrisvfritz/prerender-spa-plugin， 我看了文档才知道，固定的路由比如 /hot, /iot, /traffic 等配置下完全没问题，可是动态路由比如产品详情页（根据产品编号去获取数据）就很难办了。

而且百度SEO要经常更新内容，发外链等等，起初我不懂我的网站怎么更新内容，我路由就那么几个，又不是博客，后来仔细一想，那么多产品，每个产品编号都不同，那么每个产品详情页不就是一个单独的网站吗？

我抱着试一试的心态向百度提交了一堆产品详情页地址，它提示我成功，但是目前没什么感觉。不过我还是不放心，想对这些动态路由进行预渲染，在github仓库里的issue找了很久，其中作者有直接回复 不支持动态路由预渲染，建议ssr 的，但是也不是完全没法子，作者还说可以把 所有动态路由都写出来配置下，这个 chrisvfritz/prerender-spa-plugin#375 回复我一开始没看懂，后来经过我3个小时的摸索，大概这样配置：

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({ // 预渲染
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        routes: [
          '/hot', 
          '/iot', 
          '/street-lighting', 
          '/traffic', 
          '/company', 
          '/login',
          '/productDetail/20200501170342p8O',
          '/productDetail/20200501165752p8O',
          '/productDetail/20200501172222r8y',
          '/productDetail/20200501172416r8y',
          '/productDetail/20200501173238WLk',
          '/productDetail/20200501173606WLk',
          '/productDetail/20200501175355WLk',
          '/productDetail/20200501191542aal',
          '/productDetail/20200501192826r8y',
        ],
        renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
          // Optional - defaults to 0, no limit.
          // Routes are rendered asynchronously.
          // Use this to limit the number of routes rendered in parallel.
          maxConcurrentRoutes: 4,
  
          // Optional - Wait to render until a certain amount of time has passed.
          // NOT RECOMMENDED
          renderAfterTime: 5000, // Wait 5 seconds. 时间设置短的话可能会报错，因为加载数据可能有延迟
  
          // Other puppeteer options.
          // (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
          headless: false // Display the browser window when rendering. Useful for debugging.
        })
      })
    ]
  }
}

这样确实生成了相应的html，不过这些页面好像并没有什么差别。

建议

如果是建网站要做SEO等等，还是建议直接 SSR 吧，我打算把我这个网站的国际站用SSR重写下，毕竟我这个站主要做外贸用的。而且我做的是响应式，但是写的不好，我还是将PC和移动分成两个项目来写吧

看到最后 放弃了这个插件，但是seo的优化还是要继续：

使用：vue-meta-info 这个库 来动态配置每个页面的tdk吧

下载：

npm i vue-meta-info -S

然后在main.js中进行全局引用：

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

完事直接在页面中调用:(跟data同级)

  metaInfo() {
    return {
      title: "留言板 | biaoBlog | 个人博客"
    };
  },

文章里面需要动态设置：

  metaInfo() {
    return {
      title: this.bookInfo.title || "个人博客丨biaoBlog",
      meta: [
        {
          name: "description",
          content: this.bookInfo.summary
        }
      ]
    };
  },

值得注意的是，description和keyWord的设置 不是替换 而是在下面重新生成一个新的meta标签

所以不要发现。。页面最顶级的des和keywork没变 以为是bug 其实不是。。在下面还有des和keywork。。

心累的一天 忙碌了一天 效果很低。。杯水车薪