vue下载prerender-spa-plugin插件报错

最新推荐文章于 2024-12-19 21:50:31 发布

转载最新推荐文章于 2024-12-19 21:50:31 发布 · 625 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cb0461fe51d456e2446fc74

文章标签：

#javascript #ViewUI

为什么要使用prerender-spa-plugin 主要原因有两点：

1、SEO：SPA应用的SEO比较差，爬虫爬到的页面结构大多只有入口页，然而入口页又几乎没有什么内容，因此搜索排名很低。

2、首屏体验：由webpack生成的入口页基本上只有一个主js，本身页面没有内容，因此在这个js加载完成之前，用户看到的都是一片空白。为了解决这个问题，一般是把规定好的静态页给后台，用户请求直接返回的是静态页，这样在主js加载之前用户还是能看到一些东西的。但是这样也会有问题，比如我们想做一个Loading的组件放到首屏，就非常麻烦，同时也是又一个和后台沟通的成本（其实就是大佬不想总是依赖后台-_-）。所以如果我们自己能直接生成体验良好的首屏页面，那肯定是极好的。

安装执行npm i prerender-spa-plugin即可，但是如果不能够翻墙的话就会遇到一个坑。

prerender-spa-plugin插件是需要依赖puppeteer的，也就是谷歌出品的无头浏览器插件，这个插件会下载最新版的chromium(大约200M+），所以如果不能翻墙，下载的时候就报如下图错误了。

解决方法：

npm install npm install prerender-spa-plugin --save --ignore-scripts