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有參數(shù)，就需要寫成 /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有參數(shù)，就需要寫成 /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
http://www.itdecent.cn/p/6a4c0b281e7f