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

·  阅读 147

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

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

  • vue项目具体配置:
  1. 添加依赖 package.json
"prerender-spa-plugin":"^3.4.0"
复制代码
  1. 配置 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;
复制代码
  1. 入口函数中调用预渲染
new Vue({
  router,
  store,
  render: (h) => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event')) /// 执行webpack配置中的狗子函数
  }
}).$mount("#app");
复制代码
  • 注意点

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

该插件支持的框架还挺全的,可以参照文档,详细配置
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改