vuecli3针对spa项目预渲染配置

目前项目需要进行seo优化，调研了一下prerender预渲染，简述一下配置和不足
预渲染：
构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的 html 文件已经有静态数据，需要ajax数据的部分未构建。
如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。

配置

1. vue add prerender-spa根据提示配置即可

? Which routes to pre-render? (list them separated by a comma) /,/about,/contact
/,/about,/contact是你要预渲染的router
你可以按自己的写，要什么界面变成静态的就写哪个界面的路由，逗号隔开。
 
? Use a render event to trigger the snapshot? Yes
? Use a headless browser to render the application? (recommended) Yes
? Only use prerendering for production builds? (recommended) Yes
上面三个都可以写yes

之后再vue.config.js中就会多出几行代码

pluginOptions: {
   prerenderSpa: {
     registry: undefined,
     renderRoutes: [
       '/',
       '/about',
       '/contact',
     ],
     useRenderEvent: true,
     headless: true,
     onlyProduction: true
   }
 }

2. 手动配置
   npm install prerender-spa-plugin puppeteer
   途中需要安装chrome，一般是装不上的
   更改npm源npm config set registry https://registry.npm.taobao.org
   之后再次安装，成功
3. 在vue.config.js中的configureWebpack中添加配置

config.plugins.push(
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),

          // Optional - The location of index.html
          // indexPath: path.join(__dirname, '../dist', 'index.html'),

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

          // 预渲染代理接口
          // server: {
          //   proxy: {
          //     '/api': {
          //       target: 'http://localhost:9018',
          //       secure: false
          //     }
          //   }
          // },

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

4. 在入口main.js中添加

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

5. 运行打包命令npm run build后根据配置出现文件
   

6. 放到nginx中进行测试，效果如图
   

总结

1. 配合vue-meta-info可以针对spa的vue项目配置单独的title,meta,keyword,descriptions等
2. 预渲染无法渲染异步加载的数据，如果需要对数据做seo还是推荐用nuxt搭建框架
3. 配置简单，开箱即用，对原有框架基本没有影响
4. 需要路由为history模式