html5 预渲染,VUE预渲染及遇到的坑_情愫

本文介绍了

npm install -D prerender-spa-plugin

修改webpack.prod.conf.

var PrerenderSpaPlugin = require('prerender-spa-plugin')

new PrerenderSpaPlugin(

//将渲染的文件放到dist目录下

path.join(__dirname, '../dist'),

//需要预渲染的路由信息

[ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],

{

//在一定时间后再捕获页面信息，使得页面数据信息加载完成

captureAfterTime: 50000,

//忽略打包错误

ignoreJSErrors: true,

phantomOptions: '--

遇到的问题

1.下载prerender-spa-plugin 失败解决方案

我更新prerender-spa-plugin 发现运行下去都是 error报错安装不成功，

但是他会提示你对downloading 什么文件保存到哪个位置对吧，

把他提示着这个在浏览器输入，我的是下面这个

//windows

http://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip

//MAC

https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-macosx.zip

也就是把 downloading后面的链接下载下来，然后放在他saving提示的目录下

windows

C:\Users\hasee\AppData\Local\Temp\phantomjs

MAC路径

/var/folders/sf/gyxbw5_s1sq45fb6hs5l_77m0000gn/T/phantomjs/

不用解压，保留 .zip就好，然后你在更新下 prerender-spa-plugin

npm install prerender-spa-plugin

2. 安装puppeteer报错

Puppeteer 至少需要

是因为在执行安装的过程中需要执行install.

npm i --save puppeteer --ignore-scripts

网上的另一种方法：

1.创建项目crawl

2. npm init

3.cmd

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

4.npm install

5.npm -i puppeteer

puppeteer下载完成

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。

html5 预渲染,VUE预渲染及遇到的坑_情愫_前端开发者相关推荐

服务端渲染和客户端渲染以及服务器部署
文章内容输出来源:拉勾教育前端高薪训练营 SPA单页面应用优点用户体验好开发效率高渲染性能好可维护性好缺点需等待客户端js解析执行完,造成首屏渲染时间长单页面的html是没有内容的,不 ...
vue预渲染之prerender-spa-plugin解析(二)
前面我们有介绍了什么是预渲染.使用场景.然后简单的介绍了预渲染的集成过程,感兴趣的童鞋可以去看一下vue预渲染之prerender-spa-plugin解析(一),这一节我们重点来研究一下preren ...
预渲染vue.js应用程序（使用node或laravel）
服务器端渲染现在非常流行.但它也并非没有缺点.预渲染是一种替代方法,在某些情况下甚至可能更好.下面我们来看一下如何预渲染vue.js应用程序. 在本文中,我们将探讨预渲染如何与vue.js一起工作,并 ...
arnold渲染器预览窗口打开时保存有可能崩溃，解决方法如下
使用arnold 渲染器时,使用arnold 内置渲染器预览,结果,一保存就崩溃,开始以为是中文路径造成的.后来发现还是崩溃,于是关闭了 arnold Render view窗口,再保存就可以了.阿弥 ...
浅谈ssr服务器渲染、客户端渲染和预渲染以及前端打包部署
浅谈ssr服务器渲染.客户端渲染和预渲染以及前端打包部署 1.客户端渲染: 2.服务器渲染(SSR) 3.预渲染前端打包文件dist结合nginx和node原理图(个人见解) 今天下班在地铁上直到现 ...
万张图片，流畅体验——记一次 Vue 列表渲染
简介: ### 背景团队目前的Web端产品中需要显示两个列表视图:卡片列表和条目列表,并且在点击切换按钮的时候,对两个列表进行切换显示. ![条目列表](https://ata2-img.oss-c ...
html5渲染,HTML的渲染过程
页面的渲染有以下特点: 23 23 23 23 23 单线程事件轮询定义明确.连续.操作有序(HTML5) 分词和构建DOM树请求资源并预加载构建渲染树并绘制页面具体来说: 当我们从网络上得到 ...
服务器端渲染-Vue SSR搭建
阅读建议:建议通过左侧导航栏进行阅读文章简介:本文是Vue.js服务器端渲染的另一种解决方案-SSR(Server-Side Rendering)学习笔记 Vue SSR是什么官方文档解释:Vue ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
vue+photo-sphere-viewer 渲染全景图片，带给你沉浸式体验
vue+photo-sphere-viewer 渲染全景图片,带给你沉浸式体验 Photo Sphere Viewer是一款基于Three.js的360X180度全景图预览js插件.该js插件可以36 ...

html5 预渲染,VUE预渲染及遇到的坑_情愫_前端开发者

html5 预渲染,VUE预渲染及遇到的坑_情愫_前端开发者相关推荐

最新文章

热门文章