最近在研究服務(wù)端渲染（SSR） nuxt.js框架，（中文文檔 https://www.nuxtjs.cn/api 及自己的測試demo https://github.com/have-not-BUG/nuxt.js-demo），順便試了一下預(yù)渲染插件prerender-spa-plugin，關(guān)于他們兩的區(qū)別和優(yōu)劣勢我就不贅述了，可以看下vue的官方文檔。這里主要講一下使用prerender-spa-plugin主要步驟及一些坑：
1、安裝時一定要記得使用cnpm安裝Puppeteer后再cnpm安裝 prerender-spa-plugin,否則安裝會失敗
2、配置vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
    // publicPath: process.env.NODE_ENV == "production" ? "././" : './',
    publicPath: '/',
    assetsDir: "./dist",
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            console.log('生產(chǎn)模式啟用了')
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // 生成文件的路徑，也可以與webpakc打包的一致。
                    // 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預(yù)渲染的時候只會卡著不動。
                    staticDir: path.join(__dirname,'dist'),
                    // 對應(yīng)自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。
                    // routes: ['/', '/contact','/demo','/dev','/footer','/header','/home','/news','/scheme'],
                    routes: ['/','/autoRouter/one','/autoRouter/two','/autoRouter/zero'],
                    // 這個很重要，如果沒有配置這段，也不會進(jìn)行預(yù)編譯
                    renderer: new Renderer({
                        injectProperty: '__PRERENDER_INJECTED',
                        inject: {
                            foo: 'bar'
                        },
                        headless: true,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應(yīng)上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
            // // 這里是配置第三方的插件的
            // externals : {
            //     AMap: "AMap",
            // }
        };
        }
    }
};

3、配置main.js

new Vue({
  render: h => h(App),
  router,
  // 延遲5s 保證頁面請求和內(nèi)容全部能夠加載渲染完成
// 或者使用 renderAfterTime: 5000 或renderAfterElementExists：'my-app-element'配置

  mounted () {
    setTimeout(() => {
      console.log("dispatch event");
      window.document.dispatchEvent(new Event("render-event"));
    }, 5000);
  }
  }).$mount("#app");

4、配置路由模式為mode: "history"且不得使用路由懶加載的方式或者使用 renderAfterTime: 5000配置
5、build構(gòu)建即可看到最終的預(yù)渲染的html頁面
two組件里的ip數(shù)據(jù)是走接口請求到的，預(yù)渲染html文件也展示出來了。

最終頁面

目錄結(jié)構(gòu)

我的demo代碼：
https://github.com/have-not-BUG/prerender-demo

其他可能的坑，見
1、https://huzizi.com/vue-cli-3-0-shi-yong-prerender-spa-plugin-yu-xuan-ran-yu-dao-de-mo-ming-qi-miao-de-keng/
2、https://blog.csdn.net/weixin_34137872/article/details/112070362
3、http://blog.ideacome.com/2020/03/31/vue-prerendercai-keng-bi-ji/
4、https://blog.csdn.net/qq_37564189/article/details/106090414

為什么說是“莫名其妙”的坑，因?yàn)樵谶@項目的前幾天，使用預(yù)渲染的方式都非常正常，可以正常打包，輸出靜態(tài)文件。但是這個時候就抽風(fēng)了，開發(fā)環(huán)境完全相同，當(dāng)下有點(diǎn)摸不著頭腦的感覺。
當(dāng)然，遇坑則填坑，看終端打印的信息，分析可能有以下原因：

• puppeteet 無法啟動 chromium，權(quán)限不足？
• puppeteet 下載的 chromium 版本錯誤？
• puppeteet 下載的 chromium 文件損壞？

針對權(quán)限疑惑，檢查了項目目錄的相關(guān)權(quán)限，未發(fā)現(xiàn)有問題；接著到 chromium 站點(diǎn)下載 Win 64位的 r662092 版本包，重新覆蓋 \node_modules\puppeteer\.local-chromium\win64-662092\chrome-win下的所有文件，重新 build，依舊輸出同樣錯誤。
解決不了，只有 Google 大法了，尋尋覓覓一圈依舊沒有找到解決方法。當(dāng)看到 Puppeteer Api 文檔時，它提供一個屬性 executablePath 人為指定運(yùn)行綁定的 Chromium 版本：默認(rèn)情況下，Puppeteer 下載并使用特定版本的 Chromium 以及其 API 保證開箱即用。 如果要將 Puppeteer 與不同版本的 chrome 或 chromium 一起使用，在創(chuàng)建Browser實(shí)例時傳入 chromium 可執(zhí)行文件的路徑即可。 如同看到了希望一樣，回到 vue.config.js 文件中，添加 executablePath屬性

module.exports = {    configureWebpack: () => {    if (process.env.NODE_ENV === "production") {      return {        plugins: [          new PrerenderSPAPlugin({            // 【必須】生成文件的路徑，也可以與webpakc打包的一致            staticDir: path.join(__dirname, "dist"),            // 【必須】對應(yīng)自己的路由文件，如路由有參數(shù)，則需寫成 /a/param1            routes: ["/", "/about", "/news", "/contact"],            //【可選】服務(wù)器端口配置            server: {              port: 8188            },            // 這個很重要，如果沒有配置這段，也不會進(jìn)行預(yù)編譯            renderer: new Renderer({              inject: {                foo: "bar"              },              headless: false,              // 對應(yīng) src/main.js 中 document.dispatchEvent(new Event('custom-render-trigger'))，兩者的事件名稱要相同              renderAfterDocumentEvent: "custom-render-trigger",              // 更改運(yùn)行綁定的 Chromium 版本，即：使用本機(jī) chrome 來執(zhí)行預(yù)渲染操作，注意 win、mac、linux 不同環(huán)境的路徑指定              executablePath: 'Your/Path/Google/Chrome/Application/chrome.exe'            })          })        ]      };    }  }}

5、npm config set puppeteer_download_host=https://npm.taobao.org/mirrors