vue2.0 使用预渲染做SEO

最新推荐文章于 2024-05-07 23:16:48 发布

卜卦丶cc

最新推荐文章于 2024-05-07 23:16:48 发布

阅读量367

点赞数

分类专栏： vue 文章标签： vue seo

本文链接：https://blog.csdn.net/qq_37896578/article/details/112713903

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js项目中使用prerender-spa-plugin插件来预先渲染指定路由，以提升SEO效果。通过在webpack配置文件中引入插件，并在main.js中设置触发渲染的事件，成功实现页面静态化。在npm run build后，项目完成了预渲染，提高了搜索引擎的抓取效率。

摘要由CSDN通过智能技术生成

1. 引包

cnpm install prerender-spa-plugin -D

2. 在webpack.prod.conf.js 放入

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

  plugins: [
    new PrerenderSPAPlugin({
      //你存放的静态资源目录
      staticDir: path.join(__dirname, '../dist'),
      //哪些路由进行SEO，数组形式，可以多个路由
      routes: ['/', '/Agreement','/Advert','/wechatH5/Recharge','/wechatH5/Login'],
      renderer: new Renderer({
        inject: {
          foo: 'far'
        },
        headless: false,
        //文档事件渲染后调用的事件名，在项目的入口中使用
        renderAfterDocumentEvent: 'render-event'
      })
    }),
    ]

3. main.js 启用

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
})