vue 通过prerender-spa-plugin预渲染，vu

vue 2.X使用步骤

一.安装

cnpm i prerender-spa-plugin --save -dev (建议通过淘宝镜像)
npm i vue-meta-info

二.修改配置文件

1.router/index.js

export default new Router({
  linkActiveClass:"on",
  mode:'history',     //必须为history模式
  base:'/base/',       //添加base
  routes: [...]

2.build/utils.js （注释publicPath,解决打包后图片路径失效）

//publicPath:'../../'  

3.config/index.js

assetsPublicPath: '/',

4.build/webpack.prod.conf.js (引入下载的模块)

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

在plugins中增加

// 配置PrerenderSPAPlugin
    new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      staticDir: path.join(__dirname, '../dist'),

      // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
      routes: [
        '/',
        '/community',
        '/about'
        '/news'
      ],

      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        renderAfterDocumentEvent: 'render-event'
      })
    })

5.main.js

import MetaInfo from "vue-meta-info";     //引入vue-meta-info
Vue.use(MetaInfo)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
//这个不要忘记！！
  mounted(){
    document.dispatchEvent(new Event('render-event'))
  }
});

6. 开始配置vue-meta-info，在路由跳转的xxx.vue页面当中添加配置

export default {
    name: "home",
    metaInfo:{
      meta:[
        {
          name:'keywords',
          content:'.....'
        },
        {
          name:'discription',
          content:'.....'
        }
      ]
    }
  }

7.最后，执行npm run build进行打包，打包完成后的文件夹下，每个页面都被分成了一个文件夹，文件夹下放了一个index.html文件。（此时打开其中任意index.html文件，页面所带的js，css都报错没有生效，但是部署到服务器是没问题的。），页面头部也被添加了每个页面配置的meta信息。

vue 3.X使用步骤

1.上述安装步骤一样

2.vue-config.js中增加

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // 生成文件的路径，也可以与webpakc打包的一致。
                    // 下面这句话非常重要！！！
                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname,'dist'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

3.main.js

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

4.router.js 中设置mode: “history”

5.最后npm run build 进行打包。