vue 如何优化首页的加载速度?vue 首页白屏是什么问题引起的?如何解决呢?
vue 如何优化首页的加载速度?
- 路由懒加载
- ui框架按需加载
- gzip压缩
vue首页白屏是什么问题引起的
- 第一种,打包后文件引用路径不对,导致找不到文件报错白屏
解决办法:修改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。
- 第二种,由于把路由模式mode设置影响
解决方法:路由里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。
所以只要删除mode或者把mode改成hash就OK了。
- 第三种,项目中使用了es6的语法,一些浏览器不支持es6,造成编译错误不能解析而造成白屏
解决方法:
安装 npm install --save-dev babel-preset-es2015
安装 npm install --save-dev babel-preset-stage-3
在项目根目录创建一个.babelrc文件 里面内容 最基本配置是:
{// 此项指明,转码的规则"presets": [// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码["env", {"modules": false}],// 下面这个是不同阶段出现的es语法,包含不同的转码插件"stage-2"],// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译"plugins": ["transform-runtime"],// 下面指的是在生成的文件中,不产生注释"comments": false,// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置"env": {// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development"test": {"presets": ["env", "stage-2"],// instanbul是一个用来测试转码后代码的工具"plugins": ["istanbul"]}}
}
相关文章:
vue 如何优化首页的加载速度?vue 首页白屏是什么问题引起的?如何解决呢?
vue 如何优化首页的加载速度? 路由懒加载ui框架按需加载gzip压缩 vue首页白屏是什么问题引起的 第一种,打包后文件引用路径不对,导致找不到文件报错白屏 解决办法:修改一下config下面的index.js中bulid模块导出的路径。因为in…...
Android平台GB28181设备接入模块之SmartGBD
大牛直播SDK研发的Android平台GB28181设备接入SDK(SmartGBD),可实现不具备国标音视频能力的 Android终端,通过平台注册接入到现有的GB/T28181—2016服务,可用于如执法记录仪、智能安全帽、智能监控、智慧零售、智慧教育…...
JVM第十三讲:调试排错 - JVM 调优参数
调试排错 - JVM 调优参数 本文是JVM第十三讲,调试排错 - JVM 调优参数。对JVM涉及的常见的调优参数和垃圾回收参数进行阐述。 文章目录 调试排错 - JVM 调优参数1、Jvm参数2、垃圾回收 问题1:线上ECS治理问题2:白龙马线上服务机JVM参数配置&a…...
Android Gradle权威指南读书笔记
第一章 Gradle入门 生成Gradle Wrapper 命令:gradle wrapper --gradle-version 版本号自定义Gradle Wrapper task wrapper(type : Wrapper) { gradleVersion 2.4 archiveBase GRADLE USER HOME archivePath wrapper/dists distributionBase GRADLE USER HOME …...
顺子日期(蓝桥杯)
文章目录 顺子日期问题描述答案:14字符串解题CC语言指针C语言函数 数组解题 顺子日期 问题描述 本题为填空题,只需要算出结果后,在代码中使用输出语句将所填结果输出即可。 小明特别喜欢顺子。顺子指的就是连续的三个数字:123、…...
攻防世界web篇-unserialize3
得出php代码残篇 将代码补全后再在线php运行工具中进行运行 在浏览器输入后得到下面的界面 这里需要将O:4:“xctf”:1:{s:4:“flag”;s:3:“111”;} 改为 O:4:“xctf”:2:{s:4:“flag”;s:3:“111”;}...
微信小程序 onLoad和onShow的区别
在微信小程序中,onLoad() 和 onShow() 是两个常用的生命周期函数,用于监听页面的加载和显示事件。这两个函数的区别如下: 触发时机 onLoad() 函数只会在页面加载时触发一次,而 onShow() 函数每次页面显示时都会被触发。因此&#…...
elementui select组件下拉框底部增加自定义按钮
elementui select组件下拉框底部增加自定义按钮 el-select组件的visible-change 事件(下拉框出现/隐藏时触发) <el-selectref"select":value"value"placeholder"请选择"visible-change"visibleChange">&…...
深入理解闭包:原理、应用与最佳实践
1、 什么是闭包? 如果一个函数内部定义了另一个函数,并且内部函数引用了外部函数的变量,那么内部函数就形成了一个闭包。 def outer_function(x):# 外部函数接受一个参数 x 是自由变量# seed 也是一个自由变量seed 10def inner_function(y…...
[NSSCTF 2nd]Math
原题py: from secret import flag from Crypto.Util.number import * import gmpy2length len(flag) flag1 flag[:length//2] flag2 flag[length//2:] e 65537m1 bytes_to_long(flag1) p getPrime(512) q getPrime(512) n p*q phi (p-1)*(q-1) d gmpy2.i…...
uml知识点学习
https://zhuanlan.zhihu.com/p/659911315https://zhuanlan.zhihu.com/p/659911315软件工程分析设计图库目录 - 知乎一、结构化绘图1. 结构化——数据流图Chilan Yuk:1. 结构化——数据流图2. 结构化——数据字典Chilan Yuk:2. 结构化——数据字典3. 结构…...
JAVA学习日记1——JAVA简介及第一个java程序
简单记忆 JAVA SE :标准版,核心基础 JAVA EE:企业版,进阶 JDK:Java Development Kit,Java开发工具包,包含JRE JRE:Java Runtime Environment,Java运行时环境ÿ…...
Linux命令(102)之less
linux命令之less 1.less介绍 linux命令less是一个文本文件查看工具,它以一种交互的方式,逐页地显示文本文件的内容,并且可以在文件中进行搜索等定位 2.less用法 less [参数] filename less参数 参数说明-N显示每行的行号-i忽略搜索时的大…...
vue多条件查询
<template><div><input type"text" v-model"keyword" placeholder"关键字"><select v-model"category"><option value"">所有分类</option><option v-for"cat in categories&q…...
c 语言基础:L1-038 新世界
这道超级简单的题目没有任何输入。 你只需要在第一行中输出程序员钦定名言“Hello World”,并且在第二行中输出更新版的“Hello New World”就可以了。 输入样例: 无输出样例: Hello World Hello New World 程序源码: #incl…...
计算机算法分析与设计(13)---贪心算法(多机调度问题)
文章目录 一、问题概述1.1 思路分析1.2 实例分析 二、代码编写 一、问题概述 1.1 思路分析 1. 设有 n n n 个独立的作业 1 , 2 , … , n {1, 2, …, n} 1,2,…,n,由 m m m 台相同的机器 M 1 , M 2 , … , M m {M_1, M_2, …, M_m} M1,M2,…,Mm 进行加工处…...
小程序canvas层级过高真机遮挡组件的解决办法
文章目录 问题发现真机调试问题分析问题解决改造代码效果展示 问题发现 在小程序开发中需要上传图片进行裁剪,在实际真机调试中发现canvas层遮挡住了生成图片的按钮。 问题代码 <import src"../we-cropper/we-cropper.wxml"></import> <…...
番外8.1 配置+管理文件系统
Task01: Linux 文件系统结构; 可以进行Linux操作系统的文件权限管理与方式切换,可以应用磁盘与文件权限管理工具; 01:常见文件系统类型(Ext4[rhel6默认文件管理系统], 存储容量1 EB1073741824 GB; XFS[rhel 7/8默认的文…...
互联网Java工程师面试题·Java 总结篇·第八弹
目录 72、用 Java 的套接字编程实现一个多线程的回显(echo)服务器。 73、XML 文档定义有几种形式?它们之间有何本质区别?解析XML 文档有哪几种方式? 74、你在项目中哪些地方用到了 XML? 72、用 Java 的套…...
VSCode修改扩展和用户文件夹目录位置(Windows)
VSCode修改扩展和用户文件夹目录位置(Windows) 前言:方法前期准备:方法1(强推荐)方法2(不太推荐)方法3(好麻烦,不太推荐) 前言: VSCod…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...
Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生,系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler,它是Thread的子类(就是package java.lang;里线程的Thread)。本文将利用它将设备信息、报错信息以及错误的发生时间都…...
【51单片机】4. 模块化编程与LCD1602Debug
1. 什么是模块化编程 传统编程会将所有函数放在main.c中,如果使用的模块多,一个文件内会有很多代码,不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里,在.h文件里提供外部可调用函数声明,其他.c文…...
