VUE预渲染及遇到的坑

2024-10-03 04:15:22

本文介绍了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 （因为封网，直接下载会失败）

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.js 数据渲染成功仍报错的问题

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

本文介绍了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.按照页面或者组件分块懒

VUE预渲染及遇到的坑

相关推荐

随机推荐