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下载完成

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

(0)

相关推荐

  • vue使用prop可以渲染但是打印台报错的解决方式

    vue属性传递时有时会报下述错误 vue.esm.js?f959:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'RegistrationAuthority' of undefined" found in ---> <DialogHistory> at src/components/tools/dialog_history.vue <NurseInfor> at src/

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • 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'), //需

  • vue脚手架配置预渲染及prerender-spa-plugin配置方式

    目录 脚手架配置预渲染及prerender-spa-plugin配置 脚手架2.0:(自己的是2.0) 脚手架3.0 (未验证,应该行) 记录vue预渲染prerender-spa-plugin的坑 安装 找到build下的webpack.prod.conf.js 脚手架配置预渲染及prerender-spa-plugin配置 预渲染: 便于seo优化:既查看源码 是 html格式 用到插件: cnpm install prerender-spa-plugin --save 脚手架2.0:(自己

  • Vue使用预渲染代替SSR的方法

    页面渲染方式 前段时间了解到页面有几种渲染方式:SPA SSR,以前写的一个网站但是用的渲染方式是 SPA,导致搜索引擎爬虫抓不到任何信息,对 SEO 优化不很好,本想改成 SSR,但是改动配置很多,弄来弄去怕影响开发,今天在 Vue 官网看到预渲染,今天试了下,感觉是一个折中的方法,而且配置改动不大,大家可以试试 什么是服务器端渲染 (SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲

  • vue-cli3.0如何使用prerender-spa-plugin插件预渲染

    目录 如何使用prerender-spa-plugin插件预渲染 预渲染 prerender-spa-plugin尝试 先说一下效果吧 不好用的地方 使用 坑点 如何使用prerender-spa-plugin插件预渲染 vue-cli3.0版本 1.安装 cnpm install prerender-spa-plugin --save 2.vue-config.js中增加 const PrerenderSPAPlugin = require('prerender-spa-plugin'); c

  • 谈谈我在vue-cli3中用预渲染遇到的坑

    前言 在开发自己的个人网站的时候后,选择了用vue来开发,不可避免的遇到要对seo做优化.鉴于目前页面也不多,因此首先采用的是预渲染的方式. 本来以为把插件一装,配置一配,咔咔咔就能搞定,结果发现并没有想的那么简单.因为首先就遇到了两个报错,折腾了半个晚上. 问题及解决方案 第一个报错: Unable to prerender all routes! 这个问题是在设置好配置之后,build的时候报出来的.主要症状就是打开了浏览器后卡主不动,然后就强制退出了. 解决方案: 参考了github上的i

  • Vue单页面应用做预渲染的方法实例

    目录 前言 vue-cli2.0版本 vue-cli3.0版本 总结 前言 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr(服务端渲染)和预渲染两种解决方案,这里我们只讨论预渲染 vue-cli2.0版本 安装 npm install prerender-spa-plugin --save webpack.prod.conf.js增加部分代码 const path = require('path') const PrerenderSPAPlugin = re

  • 详解服务端预渲染之Nuxt(介绍篇)

    现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据,由于单页面应用读取到的页面是几乎空白的,无法爬取到任何数据信息. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content=&quo

  • Vue内部渲染视图的方法

    1.什么是虚拟DOM 以前M的命令式操作DOM即使用jQuery操作DOM节点,随着状态的增多,DOM的操作就会越来越频繁,程序的状态也越难维护,现在主流的框架都是采用声明式操作DOM,将操作DOM的方法封装起来,我们只要更改数据的状态,框架本身会帮我们操作DOM. 虚拟DOM根据状态建立一颗虚拟节点树,新的虚拟节点树会与旧的虚拟节点树进行对比,只渲染发生改变的部分,如下图: 2.引入虚拟DOM的目的 把渲染过程抽象化,从而使得组件的抽象能力也得到提升,并且可以适配DOM以外的渲染目标: 可以更

  • vue 系列——vue2-webpack2框架搭建踩坑之路

    react.vue.angular代表了3种前端工程化的思想,学习三大框架主要是理解它们的核心概念,比如组件.生命周期.单向数据流.双向绑定等.这些概念在非框架开发中,很少人会去这样系统化的思考,对于新手来说,很多概念都没有接触过,不知道从何入手一个react.vue或者是angular项目,下面我将会从零搭建vue项目,边做项目边学习vue的思想. 1.想要使用vue,我首先该怎么做? 想要学习vue,我第一件事是去vue官网看简介:https://cn.vuejs.org/v2/guide.

  • 详解如何在webpack中做预渲染降低首屏空白时间

    一.浏览器渲染过程 1.用户打开页面,空白屏,等待html的返回 2.html下载完毕,开始解析html,初始渲染 3.下载css.js等资源,执行js渲染虚拟DOM 4.发起请求.获取数据,渲染内容 下面我们主要是讨论一下如何通过预渲染的方式降低空白屏的时间 缩小首屏载时间是一个重要的优化项,总结来主要有以下几种方式: 1.尽可能的缩小webpack或者其他打包工具生成的包的大小 2.使用服务端渲染的方式 3.使用预渲染的方式 4.使用gzip减小网络传输的流量大小 5.按照页面或者组件分块懒

随机推荐