安装插件

  1. cnpm install prerender-spa-plugin --save

配置

  1. vue.config.js
  3. const PrerenderSPAPlugin = require('prerender-spa-plugin');
  4. const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
  5. const path = require('path');
  6. module.exports = {
  7.     configureWebpack: config => {
  8.         if (process.env.NODE_ENV !== 'production') return;
  9.         return {
  10.             plugins: [
  11.                 new PrerenderSPAPlugin({
  12.                     // 生成文件的路径，也可以与webpakc打包的一致。
  13.                     // 下面这句话非常重要！！！
  14.                     // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
  15.                     staticDir: path.join(__dirname,'dist'),
  16.                     // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
  17.                     routes: ['/', '/product','/about'],
  18.                     // 这个很重要，如果没有配置这段，也不会进行预编译
  19.                     renderer: new Renderer({
  20.                         inject: {
  21.                             foo: 'bar'
  22.                         },
  23.                         headless: false,
  24.                         // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
  25.                         renderAfterDocumentEvent: 'render-event'
  26.                     })
  27.                 }),
  28.             ],
  29.         };
  30.     }
  31. }
  33. main.js
  35. new Vue({
  36.   router,
  37.   store,
  38.   render: h => h(App),
  39.   mounted () {
  40.     document.dispatchEvent(new Event('render-event'))
  41.   }
  42. }).$mount('#app')
  44. router.js
  46. export default new Router{
  47.     mode: “history”  
  48. }