Vue2电商项目(八) 完结撒花:图片懒加载、路由懒加载、打包的map文件

news2024/10/8 8:48:43

一、图片懒加载

  • 安装:npm i vue-lazyload@1.3 -s (弹幕建议按1.3版本)

  • 引入

    // 引入懒加载的图片
    import hlw from '@/assets/hulu.jpg'
    // 引入插件
    import VueLazyload from 'vue-lazyload'
    // 引入插件
    Vue.use(VueLazyload, {
      // 懒加载默认的图片
      loading: hlw
    })
    
  • 使用v-lazy
    以Search页面展示商品图片为例,当网速较慢,请求数据还会获取到时,商品图片默认显示的是hlw.jpg

    <!--<img :src="goods.defaultImg" />-->
    <img v-lazy="goods.defaultImg" />
    

在这里插入图片描述

博客推荐:Vue图片懒加载

二、路由懒加载

  当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。

// 将
// import Home from '../pages/Home'
// 替换成
const HomeDetail = () => import('../pages/Home')

export default [
  // 首页
  {
    path: '/home',
    component: HomeDetail ,
     // 或者在路由定义中直接使用
    //component: () => import('../pages/Home')
    meta: { isShow: true }
  },
]

三、处理map文件

打包:npm run build
项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。有了map文件就可以像未加密的代码一样,准确的输出是哪一行那一列有错。
在这里插入图片描述
打包如果不想要map文件(因为map文件占比较大),可在vue.config.js配置:
在这里插入图片描述
重新打包就没有map文件了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2195975.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Oracle登录报错-ORA-01017: invalid username/password;logon denied

接上文&#xff1a;Oracle创建用户报错-ORA-65096: invalid common user or role name 我以为 按照上文在PDB里创建了用户&#xff0c;我以为就可以用PLSQL远程连接了&#xff0c;远程服务器上也安装了对应版本的Oracle客户端&#xff0c;但是我想多了&#xff0c;客户只是新建…

【爬虫】网站反debugger、内存爆破以及网站限制开发者工具

【爬虫】网站反debugger、内存爆破以及网站直接限制开发者工具 声明&#xff1a;本文中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0…

JWT集成Keycloak

一、直接使用现有域账号、密码获取token方式 1.KeyClack 使用现有配置 Client id : account-console 2.服务配置文件配置 3.API接口配置 4. 获取token 5.调用方式&#xff08;Swagger&#xff09;(代码方式直接在请求头加上token) 5.1 配置在Swagger访问 5.2 访问需要认证的接…

JavaWeb——Vue路由(概述、介绍、使用、解决bug)

目录 概述 介绍 使用 解决bug 概述 员工管理的页面已经制作完成。其他页面的制作方式一致。 项目中准备了部门管理的页面组件 DeptView &#xff0c;这样就有了员工管理和部门管理两个页面组件。 在系统中&#xff0c;要实现点击部门管理菜单展示部门管理组件&#xff0c…

为什么Java不支持多重继承?

不支持多重继承主要是因为会产生“菱形继承”&#xff0c;也称为钻石继承的问题。 那什么是菱形继承呢&#xff1f; 它涉及到一个类继承两个父类&#xff0c;而这两个父类又继承自同一个祖先类。这种结构在没有适当处理的情况下&#xff0c;会导致继承层次中的歧义和冗余。 如…

关于BSV区块链覆盖网络的常见问题解答(下篇)

​​发表时间&#xff1a;2024年9月20日 在BSV区块链上的覆盖网络服务为寻求可扩展、安全、高效交易处理解决方案的开发者和企业家开辟了新的视野。 作为开创性的曼达拉升级的一部分&#xff0c;覆盖网络服务提供了一个强大的框架&#xff0c;用于管理特定类型的交易和数据访问…

【目标检测】室内地板砖铺设缺陷检测数据集2000张VOC+YOLO格式

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2002 标注数量(xml文件个数)&#xff1a;2002 标注数量(txt文件个数)&#xff1a;2002 标注…

图论大总结

图论基础 98. 所有可达路径 result [] path [] def dfs(graph,x,n):if x n:result.append(path[:])returnfor i in range(1,n1):if graph[x][i] 1:path.append(i)dfs(graph,i,n)path.pop() def main():n,m map(int,input().split())# 邻接矩阵graph [[0]*(n1) for _ in …

【EXCEL数据处理】000021 案例 保姆级教程,附多个操作案例。EXCEL文档安全性设置。

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【EXCEL数据处理】000021 案例 保姆级教程&#xff0c;附多个操作案例。…

C#高级编程笔记--字符串和正则表达式

本章的主要内容如下&#xff1a; 创建字符串 格式化表达式 正则表达式​​​​​​​ 1.1 System.String类 System.String是一个类&#xff0c;专门用于存储字符串&#xff0c;允许对字符串进行许多操作。由于这种数据类型非常重要&#xff0c;C#提供了它自己…

【C++堆(优先队列)】2233. K 次增加后的最大乘积|1685

本文涉及知识点 C堆(优先队列) 贪心&#xff08;决策包容性) LeetCode 2233. K 次增加后的最大乘积 给你一个非负整数数组 nums 和一个整数 k 。每次操作&#xff0c;你可以选择 nums 中 任一 元素并将它 增加 1 。 请你返回 至多 k 次操作后&#xff0c;能得到的 nums的 最…

用Python实现运筹学——Day 15: 线性规划的项目实战

一、学习内容 在本节中&#xff0c;我们将综合应用之前学习的线性规划知识&#xff0c;解决一个复杂的实际问题。通过这个实战项目&#xff0c;进一步理解线性规划在资源分配问题中的应用。 二、实战案例&#xff1a;公司资源分配问题 2.1 问题描述&#xff1a; 某公司生产两…

Conda答疑

文章目录 优雅的使用Conda管理python环境1. conda info -e 和conda env list区别2.conda创建环境 创建的新环境在哪个文件夹下3. 自定义路径4. anaconda 新建环境 包是来自哪里4.1. 默认 Anaconda 仓库4.2. Conda-Forge4.3. 镜像源4.4. 自定义频道4.5. 总结 5. conda config --…

Spring Boot:打造下一代医院管理系统

3系统分析 3.1可行性分析 通过对本医院管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本医院管理系统采用JAVA作为开发语言&#xff0c;Spring Boot框…

electron打包报错-winCodeSign无法下载

electron打包报错-winCodeSign下载问题 问题描述 downloaded urlhttps://registry.npmmirror.com/-/binary/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration1.577s⨯ cannot execute causeexit status 2outerrorOutERROR: Cannot create s…

C++ | Leetcode C++题解之第463题岛屿的周长

题目&#xff1a; 题解&#xff1a; class Solution {constexpr static int dx[4] {0, 1, 0, -1};constexpr static int dy[4] {1, 0, -1, 0}; public:int dfs(int x, int y, vector<vector<int>> &grid, int n, int m) {if (x < 0 || x > n || y <…

【Canvas与色彩】十二等分多彩隔断圆环

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>隔断圆环Draft4十二等分多彩</title><style type"text…

华为Nova12活力版nova 11,FIN-AL60/FOA-AL00手机忘记密码到底怎么解锁无法激活设备已锁定平台工具软件固件使用解决方案

手机忘记密码到底怎么解锁修理好.弄好刷机解锁视频看了一些没弄好现在图文分享最祥细的教程方法有帐用户锁不再难了华为Nova12活力版nova 11,FIN-AL60/FOA-AL00设备关联至陌生华为账号并被锁定 忘记密码如何破解恢复出厂设置了怎样才能激活-怎样跳过帐号密码激活手机,解锁方案工…

SQL专项练习第六天

Hive 在处理不同数据需求时的灵活性和强大功能&#xff0c;包括间隔连续问题的处理、行列转换、交易数据查询、用户登录统计以及专利数据分析等方面。本文将介绍五个 Hive 数据处理问题的解决方案&#xff0c;并通过实际案例进行演示。 先在home文件夹下建一个hivedata文件夹&a…

玩客云刷派享云教程

玩客云刷机教程 扫描该二维码注册 打开网站&#xff08;xxxxxxx&#xff09; 输入你的id 然后点击生成就可以拿到该设备的下载链接(UBOOT) 详细文档&#xff1a;https://www.123684.com/s/WGAwjv-SNlv3 &#xff08;有不懂看详细文档&#xff09; 准备⼯作 •⼯具软件&…