prerender-spa-plugin 使用【Vue笔记】

需要SEO却不想把整个项目迁到服务端渲染

快捷简单的实现方式： prerender-spa-plugin

• vue项目具体配置：

1. 添加依赖 package.json

"prerender-spa-plugin":"^3.4.0"

2. 配置 vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const vueConfig = {
  configureWebpack: {
    // webpack plugins
    plugins: [
      //插件配置
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/','/heaEvaRes'], //需要预渲染的页面路由
        renderer: new Renderer({
          // inject: {
          //   foo: 'bar' 可选-可以通过`window.injectProperty`访问的任何值。
          // },
          headless: true, // 预渲染时是否打开浏览器窗口 实时预览调试
          renderAfterDocumentEvent: 'render-event' //***预渲染事件钩子名称
        })
      })
     ]
   },
   ...
 }
module.exports = vueConfig;

3. 入口函数中调用预渲染

new Vue({
  router,
  store,
  render: (h) => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event')) /// 执行webpack配置中的狗子函数
  }
}).$mount("#app");

• 注意点

  预渲染就是从开始到页面完全渲染结束，所以不能有条件页面跳转，不然的话生成的预渲染页面可能不是想要的页面

该插件支持的框架还挺全的，可以参照文档，详细配置