最近在研究服务端渲染（SSR） nuxt.js框架，（中文文档 https://www.nuxtjs.cn/api 及自己的测试demo https://github.com/have-not-BUG/nuxt.js-demo），顺便试了一下预渲染插件prerender-spa-plugin，关于他们两的区别和优劣势我就不赘述了，可以看下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('生产模式启用了')
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname,'dist'),
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
// routes: ['/', '/contact','/demo','/dev','/footer','/header','/home','/news','/scheme'],
routes: ['/','/autoRouter/one','/autoRouter/two','/autoRouter/zero'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
injectProperty: '__PRERENDER_INJECTED',
inject: {
foo: 'bar'
},
headless: true,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
// // 这里是配置第三方的插件的
// externals : {
// AMap: "AMap",
// }
};
}
}
};
3、配置main.js
new Vue({
render: h => h(App),
router,
// 延迟5s 保证页面请求和内容全部能够加载渲染完成
// 或者使用 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构建即可看到最终的预渲染的html页面
two组件里的ip数据是走接口请求到的，预渲染html文件也展示出来了。
最终页面
目录结构
我的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
为什么说是“莫名其妙”的坑，因为在这项目的前几天，使用预渲染的方式都非常正常，可以正常打包，输出静态文件。但是这个时候就抽风了，开发环境完全相同，当下有点摸不着头脑的感觉。
当然，遇坑则填坑，看终端打印的信息，分析可能有以下原因：
- puppeteet 无法启动 chromium，权限不足？
- puppeteet 下载的 chromium 版本错误？
- puppeteet 下载的 chromium 文件损坏？
针对权限疑惑，检查了项目目录的相关权限，未发现有问题；接着到 chromium 站点下载 Win 64位的 r662092 版本包，重新覆盖
\node_modules\puppeteer\.local-chromium\win64-662092\chrome-win下的所有文件，重新 build，依旧输出同样错误。
解决不了，只有 Google 大法了，寻寻觅觅一圈依旧没有找到解决方法。当看到 Puppeteer Api 文档时，它提供一个属性executablePath人为指定运行绑定的 Chromium 版本：默认情况下，Puppeteer 下载并使用特定版本的 Chromium 以及其 API 保证开箱即用。 如果要将 Puppeteer 与不同版本的 chrome 或 chromium 一起使用，在创建Browser实例时传入 chromium 可执行文件的路径即可。 如同看到了希望一样，回到vue.config.js文件中，添加executablePath属性
module.exports = { configureWebpack: () => { if (process.env.NODE_ENV === "production") { return { plugins: [ new PrerenderSPAPlugin({ // 【必须】生成文件的路径，也可以与webpakc打包的一致 staticDir: path.join(__dirname, "dist"), // 【必须】对应自己的路由文件，如路由有参数，则需写成 /a/param1 routes: ["/", "/about", "/news", "/contact"], //【可选】服务器端口配置 server: { port: 8188 }, // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new Renderer({ inject: { foo: "bar" }, headless: false, // 对应 src/main.js 中 document.dispatchEvent(new Event('custom-render-trigger'))，两者的事件名称要相同 renderAfterDocumentEvent: "custom-render-trigger", // 更改运行绑定的 Chromium 版本，即：使用本机 chrome 来执行预渲染操作，注意 win、mac、linux 不同环境的路径指定 executablePath: 'Your/Path/Google/Chrome/Application/chrome.exe' }) }) ] }; } }}
5、npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
网友评论