脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE预渲染

VUE预渲染及遇到的坑

 更新时间：2018年09月03日 10:24:46   作者：寒星冷雨  
这篇文章主要介绍了VUE预渲染及遇到的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

//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 至少需要 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

3.cmd 

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

4.npm install

5.npm -i puppeteer

puppeteer下载完成

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

您可能感兴趣的文章:

相关文章

  • 详解.vue文件中监听input输入事件（oninput）

    详解.vue文件中监听input输入事件（oninput）

    本篇文章主要介绍了详解.vue文件中监听input输入事件（oninput），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue报错Component name"Home"should always be multi问题

    Vue报错Component name"Home"should always be mult

    这篇文章主要介绍了Vue报错Component name"Home"should always be multi问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 利用vue写todolist单页应用

    利用vue写todolist单页应用

    有很多关于vue的todolist小程序，这篇文章主要介绍了 用vue写todolist单页应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vuex实现历史记录的示例代码

    vuex实现历史记录的示例代码

    这篇文章主要介绍了vuex实现历史记录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 如何通过Vue实现@人的功能

    如何通过Vue实现@人的功能

    这篇文章主要介绍了如何通过vue实现微博中常见的@人的功能，同时增加鼠标点击事件和一些页面小优化。感兴趣的小伙伴可以跟随小编一起学习一下
    2021-12-12
  • vue3中的组件间的传值(props)

    vue3中的组件间的传值(props)

    这篇文章主要介绍了vue3中的组件间的传值(props)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • vue+element搭建后台小总结 el-dropdown下拉功能

    vue+element搭建后台小总结 el-dropdown下拉功能

    这篇文章主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vue中router-view无法显示的解决办法

    Vue中router-view无法显示的解决办法

    这篇文章主要给大家介绍了关于Vue中router-view无法显示的解决办法,router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,需要的朋友可以参考下
    2023-07-07
  • 如何使用Vue mapState快捷获取Vuex state多个值

    如何使用Vue mapState快捷获取Vuex state多个值

    这篇文章主要为大家介绍了如何使用Vue mapState快捷获取Vuex state多个值实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • vue实现给当前元素添加样式,其他元素无样式问题

    vue实现给当前元素添加样式,其他元素无样式问题

    这篇文章主要介绍了vue实现给当前元素添加样式,其他元素无样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05

最新评论