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 中使用

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