为了账号安全,请及时绑定邮箱和手机立即绑定

vuejs 预渲染插件 prerender-spa-plugin 生成多页面 -- SEO

2018.09.07 17:58 596浏览

前端vue等框架打包的项目一般为SPA应用,而单页面是不利于SEO的,现在的解决方案有两种:

1、SSR服务器渲染
   了解服务器渲染请进,这里不做记录。

2、预渲染模式
   这比服务端渲染要简单很多,而且可以配合 vue-meta-info 来生成title和meta标签,基本可以满足SEO的需求 
   TIPS: 使用预渲染vue-router必须使用history模式

// 安装npm install prerender-spa-plugin --save

然后在webpack.prod.conf.js里面添加:

// 头部引入const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

在plugins里面添加:

new PrerenderSPAPlugin({  // 生成文件的路径,也可以与webpakc打包的一致。
  // 下面这句话非常重要!!!
  // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
  staticDir: path.join(__dirname, '../dist'),  // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
  routes: ['/', '/a', '/b', '/c', '/d'],  // 预渲染代理接口  server: {
    proxy: {      '/api': {
        target: 'http://localhost:9018',
        secure: false
      }
    }
  },  // 这个很重要,如果没有配置这段,也不会进行预编译
  renderer: new Renderer({
    inject: {
      foo: 'bar'
    },
    headless: false,    // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
    renderAfterDocumentEvent: 'render-event'
  })
}),

最后在main.js里面修改:

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',  // 添加mounted,不然不会执行预编译  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

到这里预编译的配置修改就完成了,执行 npm run build 查看打包后的dist文件就会发现如下结构:

https://img4.mukewang.com/5b924bbe0001142116980403.jpg

 

安装 vue-meta-info 配置title和meta:

npm install vue-meta-info --save

在main.js引入:

import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)

在vue页面中配置:

<script>export default {  // 配置title和meta数据  metaInfo: {
    title: '我是一个title',
    meta: [
      {
        name: 'keywords',
        content: '关键字1,关键字2,关键字3'
      },
      {
        name: 'description',
        content: '这是一段网页的描述'
      }
    ]
  },
  data () {    return {}
  }
}</script>

到这里 prerender-spa-plugin 与 vue-meta-info 就全部完成了

原文出处:https://www.cnblogs.com/kdcg/p/9606302.html

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消