时间:2021-05-26
本文介绍了VUE预渲染及遇到的坑,分享给大家,具体如下:
npm install -D prerender-spa-plugin修改webpack.prod.conf.js,在CopyWebpackPlugin后面,增加内容。
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: '--web-security=false', maxAttempts: 10, } ),遇到的问题
1.下载prerender-spa-plugin 失败解决方案
我更新prerender-spa-plugin 发现运行 下去都是 error报错 安装不成功,
但是他会提示你对downloading 什么文件 保存到哪个位置对吧,
把他提示着 这个在浏览器 输入,我的是下面这个
//windowshttp://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip //MAChttps://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-plugin2. 安装puppeteer报错
Puppeteer 至少需要 Node v6.4.0,如要使用 async / await,只有 Node v7.6.0 或更高版本才支持。 node下载地址: https://nodejs.org/zh-cn/
是因为在执行安装的过程中需要执行install.js,这里会下载Chromium,官网建议是进行跳过,我们可以执行 —ignore-scripts 忽略这个js执行。也可以通过设置环境变量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下载 Chromium (因为封网,直接下载会失败)
1
npm i --save puppeteer --ignore-scripts
网上的另一种方法:
1.创建项目crawl
2.npminit
3.cmd
set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=14.npm install
5.npm -i puppeteer
puppeteer下载完成
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近在做一个vue的项目,其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑,router-view不能渲染,
前言在开发自己的个人网站的时候后,选择了用vue来开发,不可避免的遇到要对seo做优化。鉴于目前页面也不多,因此首先采用的是预渲染的方式。本来以为把插件一装,配
写在前面本文记录笔者在VueSPA项目首屏加载优化过程中遇到的一些坑及优化方案!我们以vue-cli工具为例,使用vue-router搭建SPA应用,UI框架选
首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,
我们可能经常会在处理vue项目的时候,遇到数据变化,但是视图并没有实时渲染的情况vue视图为什么不渲染页面的原因当你把一个普通的JavaScript对象传给Vu