vue项目添加prerender-spa-plugin设置，对页面预渲染，利于seo

1.修改vue.config.js，添加如下代码，先安装 npm i prerender-spa-plugin

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

 configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
        
          // 这个目录只能有一级
          staticDir: path.join(__dirname, 'dist'),
          // 对应自己的路由文件，如果home有参数params,需要home/params
          routes: ['/', '/home', '/intro', '/contactUs', '/login'],
          // 预编译配置
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false
          })
        })
      ]
    }
  }
           

2.修改main.js

new Vue({
  router,
  i18n,
  store,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('custom-render-trigger'))
  }
}).$mount('#app')
           

添加完以上信息后，运行npm run build,就会在dist目录中生成对应路由的文件夹

3.vue-meta-info，这个插件可以设置每个页面title，meta的（keyword，description等），先安装npm i vue-meta-info，

4.在mian.js中添加如下代码

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

5.在home.vue 中使用

<template>
  <div>Home</div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  metaInfo: {
    title: 'home-首页',
    meta: [
      {
        name: 'keywords',
        content: '关键字1,关键字2,...'
      },
      {
        name: 'description',
        content: '这是一段网页的描述'
      }
    ]
  },
  data () {
    return {
    }
  },
  methods: {},
}
</script>
<style  scoped>
</style>
           

6.这样不同页面可以显示不同的title，keyword，description