关于 Vue 的 SPA 说的已经太多太多了，它为我们带来了极速的开发体验，极强的开发效率。可能唯一有些许不足的就是，当我们对 SEO 很在乎的时候，我们如何去处理 SEO 的需求呢？话不多述，直接上代码。

1、安装 prerender-spa-plugin

npm install prerender-spa-plugin --save

2、在 vue-config.js 中添加如下代码

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
  return {
    plugins: [
      new PrerenderSPAPlugin({
        // 生成文件的路径，也可以与webpakc打包的一致。
        // 下面这句话非常重要！！！
        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
        staticDir: path.join(__dirname,'dist'),

        // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
        routes: ['/mytest', '/about'],

        // 这个很重要，如果没有配置这段，也不会进行预编译
        renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
          renderAfterDocumentEvent: 'render-event'
        })
    }),
    ],
  };
}

3、在main.js中增加

new Vue({
  router,
  store,
  render: h => h(App),
  // 添加mounted，不然不会执行预编译
  mounted () {
    document.dispatchEvent(new Event(‘render-event’))
  }
}).$mount("#app");

4、在 router.js 中使用history模式

const router = new VueRouter({
    routes,
    mode: 'history'
})