vue 使用prerender-spa-plugin插件预渲染，生成多页面,并用vue-meta-info为每个页面生成不同的title和meta

1. 使用npm下载

npm i prerender-spa-plugin vue-meta-info --save

2. 路由改为history模式
3. 配置prerender-spa-plugin
   在vue.config.js中添加这么一段

 new PrerenderSPAPlugin(
                // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                staticDir: path.join(__dirname,'dist'),
                // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                routes: ['/', '/hykt','/hbsl','/hjlx','/hyx','/zhszpj','/hcp','/course','/xxhpt','/news','/aboutus'],
                // 这个很重要，如果没有配置这段，也不会进行预编译
                renderer: new Renderer({
                    inject: {
                        foo: 'bar'
                    },
                    headless: false,
                    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                    renderAfterDocumentEvent: 'render-event'
                })
            })

在main.js中添加

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

============================分割线==========================
这样打包时如果资源路径即publicPath不是根目录，打包会一直转圈

publicPath: process.env.NODE_ENV === "production" ? "/website" : "/",

把vue.config.js中的配置改为这样

 new PrerenderSPAPlugin(
                // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                staticDir: path.join(__dirname,'dist'),
                // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                routes: ['/', '/hykt','/hbsl','/hjlx','/hyx','/zhszpj','/hcp','/course','/xxhpt','/news','/aboutus'],
                // 这个很重要，如果没有配置这段，也不会进行预编译
                renderer: new Renderer({
                    inject: {
                        foo: 'bar'
                    },
                    headless: false,
                    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                    //renderAfterDocumentEvent: 'render-event'
                })
            })

main.js中的改为这样

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

npm run build

如果打包后会有所选路由都有个文件夹，里面装index.html，那么配置成功
注意：如果不是在打包后不是在根目录中，route中的base也要改成目录名称，否则页面不会加载

4. 使用vue-meta-info修改每个页面的meta和title信息
   在main.js中引入

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

在需要使用的页面

metaInfo: {
            title: '',
            meta: [
                {
                    name: 'keywords',
                    content: ''
                },
            ]
        },

npm run build

查看打包后html文件有没有meta和title信息，有的话成功，没有再来一次

查阅资料
https://blog.csdn.net/weixin_30433075/article/details/101882128
https://www.jianshu.com/p/6a4c0b281e7f