因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了,

在社区中看到大佬分享的十分有用,特此记录下来,原文章链接:https://ask.dcloud.net.cn/question/68773

首先在根目录新建文件vue.config.js

vue.config.js中:

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, '/static'),
to: path.join(__dirname+'/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')
}
])
]
}
}

然后在根目录命令行执行命令:

npm install copy-webpack-plugin --save-dev

分包内引用图片:

到这分包引用图片就成功啦~

我们也可以看到编译后是这样的:

uni app中关于图片的分包加载的更多相关文章

  1. 【Web】解决简书图片不显示问题“系统维护中,图片暂时无法加载”

    简书不显示图片的解决方法 首次编辑于2019-6-6 最近几天在浏览简书上的文章时,发现图片显示不出来,提示"系统维护中,图片暂时无法加载". 猜测应该是简书由于某种原因暂时屏蔽了 ...

  2. vue中对于图片是否正常加载的思考

    问题:由于业务需要,我们需要判断图片能否正常的加载,如果未正常加载的话,需要显示一张默认图片: 方案:1,由于后台返回的是一个图片id数组,例如 imgList=['343313131','21333 ...

  3. 【已解决】wepy中使用分包加载报错

    问题: "xxx.js 出现脚本错误后者未正确调用Page()"       最近看小程序启动时间(性能监控),启动时间比较长,所以考虑使用分包加载.       但在使用过程中遇 ...

  4. Android中图片的异步加载

    转: 1.  为什么要异步加载图片 下载图片比较费时,先显示文字部分,让加载图片的过程在后台,以提升用户体验 2.  SoftReference的作用 栈内存—引用 堆内存—对象 Eg: Object ...

  5. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  6. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  7. 微信小程序小结(4) -- 分包加载及小程序间跳转

    分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...

  8. WPF技术触屏上的应用系列(五): 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

    原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...

  9. 携程Android App的插件化和动态加载框架

    携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...

随机推荐

  1. nodejs的forEach不支持break打断

  2. LeetCode.62——不同路径

    问题描述: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为 ...

  3. day04-MyBatis的缓存与懒加载

    为什么会用到缓存? 为了减少与数据库链接所消耗的时间,将查询到的内容放到内存中去,下次查询直接取用就ok了. 缓存的适应场景: 1.经常查询并且不经常改变的. 2.数据的正确与否对最终结果影响不大的. ...

  4. Python开发个人专属表情包网站

    “表情包”是一种利用图片来表示感情的一种方式.表情包是在社交软件活跃之后,形成的一种流行文化,表情包流行于互联网上面,基本人人都会发表情. 曾经你是否也有过找不到表情包去应对别人的时候. 今天小编分享 ...

  5. 关于TXT文件中英文单词出现频率排序问题

    题目要求: 指定文件目录, 但是会递归遍历目录下的所有子目录,输出文件中所有不重复的单词,按照出现次数由多到少排列. 源码: package word; import java.io.File;  i ...

  6. C程序的执行和当前进程的结束

    内核使程序执行的唯一方法,就是调用exec函数,这个函数又会启动一个C程序启动例程,这个启动例程是C程序的启动地址.负责调用main函数,并接受mainn函数的返回值. 使得进程结束的唯一方式是隐式的 ...

  7. 吴裕雄--天生自然 JAVA开发学习:解决java.sql.SQLException: The server time zone value报错

    这个异常是时区的错误,因此只你需要设置为你当前系统时区即可,解决方案如下: import java.sql.Connection ; import java.sql.DriverManager ; i ...

  8. 1004 Counting Leaves (30分) DFS

    1004 Counting Leaves (30分)   A family hierarchy is usually presented by a pedigree tree. Your job is ...

  9. LeetCode简单题(二)

    题目一: 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的 ...

  10. macOS 10.14+ 安装LTP

    LTP是哈尔滨工业大学(HIT,窝工)出品的一个自然语言处理工具包.其功能包括中文分词(“分词效果好于jieba分词”[引用自学长]).词性标注.实体识别等. 对于macOS来说,现有的版本可能不多, ...