网络编程 
首页 > 网络编程 > 浏览文章

VUE预渲染及遇到的坑

(编辑:jimmy 日期: 2025/3/18 浏览:3 次 )

本文介绍了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  什么文件  保存到哪个位置对吧,

VUE预渲染及遇到的坑

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

//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报错

VUE预渲染及遇到的坑

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. npm init

VUE预渲染及遇到的坑

3.cmd 

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

VUE预渲染及遇到的坑

4.npm install

5.npm -i puppeteer

puppeteer下载完成

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:Vue 中对图片地址进行拼接的方法
下一篇:详解vue通过NGINX部署在子目录或者二级目录实践
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?