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'),

      // 對(duì)應(yīng)自己的路由文件险绘，比如index有參數(shù)，就需要寫成 /index/param1誉碴。
      routes: [
        '/',
        '/community',
        '/about'
        '/news'
      ],

      // 這個(gè)很重要宦棺，如果沒有配置這段，也不會(huì)進(jìn)行預(yù)編譯
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))黔帕，兩者的事件名稱要對(duì)應(yīng)上代咸。
        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/>',
//這個(gè)不要忘記！成黄！
  mounted(){
    document.dispatchEvent(new Event('render-event'))
  }
});

6. 開始配置vue-meta-info呐芥，在路由跳轉(zhuǎn)的xxx.vue頁面當(dāng)中添加配置

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

7.最后白华，執(zhí)行npm run build進(jìn)行打包，打包完成后的文件夾下贩耐，每個(gè)頁面都被分成了一個(gè)文件夾弧腥，文件夾下放了一個(gè)index.html文件。（此時(shí)打開其中任意index.html文件潮太，頁面所帶的js管搪，css都報(bào)錯(cuò)沒有生效，但是部署到服務(wù)器是沒問題的铡买。）更鲁，頁面頭部也被添加了每個(gè)頁面配置的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打包的一致澡为。
                    // 下面這句話非常重要！＞鞍！媒至！
                    // 這個(gè)目錄只能有一級(jí)，如果目錄層次大于一級(jí)谷徙，在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示拒啰，在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng)。
                    staticDir: path.join(__dirname,'dist'),
                    // 對(duì)應(yīng)自己的路由文件完慧，比如a有參數(shù)谋旦，就需要寫成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 這個(gè)很重要屈尼，如果沒有配置這段册着，也不會(huì)進(jìn)行預(yù)編譯
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對(duì)應(yīng)上脾歧。
                        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 中設(shè)置mode: “history”

5.最后npm run build 進(jìn)行打包甲捏。