vue prerender-spa-plugin 预渲染解决seo问题

//vue.config.js
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      console.log(process.env.NODE_ENV)
      return {
       plugins: [
        new PrerenderSPAPlugin({
          //要求-给的WebPack-输出应用程序的路径预渲染。
          staticDir: path.join(__dirname, './dist'),
          //必需,要渲染的路线。 
          routes: ['/productDetail'],
          //必须,要使用的实际渲染器,没有则不能预编译 
          renderer: new Renderer({
           inject: {
            foo: 'bar'
           },
           headless: false, //渲染时显示浏览器窗口。对调试很有用。 
           //等待渲染,直到检测到指定元素。
           //例如,在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
          //  renderAfterDocumentEvent: "render-event",
          //  renderAfterTime: 5000
          })
         })
       ]
      }
     } else {
      return;
     }
  },

  

//main.js
new Vue({
  router,
  store,
  render: (h) => h(App),
  mounted() {
    // document.dispatchEvent(new Event('render-event'))
    document.dispatchEvent(new Event('custom-render-trigger')) #这里是重点
   }
}).$mount('#app');

PS:踩坑

1、路由页面前两个页面不能有懒加载。

2、cnpm i --save puppeteer   这个运行完第一步命令后再运行下此命令,容易安装失败;([prerender-spa-plugin] Unable to prerender all routes!  我是为了解决这个报错问题,每个人问题可能不一样,其它问题我没遇到,需要大家自己搜索解决)

posted @ 2020-11-15 16:20  问问大将军  阅读(1197)  评论(2编辑  收藏  举报