最近在研究服务端渲染(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