vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）

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

SSR服务器渲染,如Nuxt.js。
预渲染模式，这比服务端渲染要简单很多，而且可以配合 vue-meta-info 来生成title和meta标签，基本可以满足SEO的需求

注意：

使用预渲染vue-router必须使用history模式
build生成的代码必须放在服务器根目录，否则会报错
可参考官方Vue.js 2.0 + vue-router Prerender SPA示例

安装

 cnpm install prerender-spa-plugin --save

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

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

在webpack.prod.conf.js的plugins里面添加：

// 配置PrerenderSPAPlugin
    new PrerenderSPAPlugin({
            // 生成文件的路径，也可以与webpakc打包的一致。
            staticDir: path.join(__dirname, '../dist'),
            
            // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
            routes: ['/', '/product','/about','/contact','/join','/jzjh'],
           
            // 这个很重要，如果没有配置这段，也不会进行预编译
            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中的文件上传到服务器的根目录

如需使用 vue-meta-info 配置title和meta按照以下步骤：

安装：

cnpm 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>

最后编辑于：2020.04.29 14:22:14