IT梅
IT梅
  • 发布:2019-04-15 11:30
  • 更新:2023-09-11 15:14
  • 阅读:21734

uniapp如何将图片放入分包中

分类:uni-app

直接放入分包中,是不会被编译的,仅针对于微信小程序,如何将图片放入分包中,

2019-04-15 11:30 负责人:无 分享
已邀请:
IT梅

IT梅 (作者) - 一个前端开发者

跟目录新增vue.config.js


vue.config.js内代码,下方等下回复一个文字版的

项目中根目录下 命令框执行 npm install copy-webpack-plugin

分包内代码引用图片

编译后的结果

  • IT梅 (作者)

    文字版vue.config.js


    const path = require('path')

    const CopyWebpackPlugin = require('copy-webpack-plugin')


    module.exports = {

    configureWebpack: {

    plugins: [

    new CopyWebpackPlugin([

    {

    from: path.join(dirname, '/分包图片放置地'),

    to: path.join(
    dirname+'/unpackage/', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, '/')

    }

    ])

    ]

    }

    }

    2019-09-20 15:48

  • 嗜睡症

    回复 IT梅: 多谢,刚才试了一下,成功了

    2019-09-20 16:50

  • IT梅 (作者)

    回复 IT梅: 新增图片的话,增加在"分包图片放置地"文件夹内对应分包名称的文件夹下,每次运行或者发行就会自动编译过去

    2019-09-20 16:51

  • IT梅 (作者)

    回复 嗜睡症: 好的

    2019-09-20 16:52

  • 6***@qq.com

    大神,采用你的方案,我测试通过了。小白一枚,既然把static目录下的分包资源复制过去了,那static目录下的分包资源是不是就可以通过什么插件删除了。。。有没有好的方法推荐

    2019-11-15 16:56

  • IT梅 (作者)

    回复 6***@qq.com: static默认是被打包的,建议是把它们放在非static的目录里

    2019-11-18 09:50

  • 豆沙小饼干

    回复 IT梅: 实验了,不行啊。有几个问题请教一下

    1、这个dirname是不是得加上啊,变成dirname

    2、unpackage需要提前在文件里面创建好吗?我创建了里面没有打包的任何内容

    2020-02-13 18:08

  • 1***@qq.com

    我用这个方法单独打包文件 里面是js (配置文件) 是能单独打包出来 但是原来的js还是在vender.js中 且还是引用原js地址。。。

    2020-06-03 10:50

  • 菜菜2

    vue.config.js

    {

    from: path.join(dirname, 'subtrain'),

    to: path.join(
    dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'subtrain')

    }


    使用

    <image src="/subtrain/train/img/loading.png" mode=""></image>

    2021-04-20 16:42

  • 喧尘

    这样是不是 这些分包图片 还是占用主包的大小的?

    2021-08-23 14:47

DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

  • IT梅 (作者)

    好的,一直没关注,官方支持了就好

    2020-01-02 16:16

  • Unlimited_S

    回复 IT梅: 你好,我现在把图片直接放在分包里,还是没有编译进去啊,请问官方支持分包内静态资源拷贝是怎么个支持法,我看了下文档好像没有相关说明额

    2020-02-13 14:19

  • DCloud_UNI_GSQ

    回复 Unlimited_S: 文档里不是写着:静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用

    2020-02-13 18:58

  • belowfox

    回复 DCloud_UNI_GSQ: 请问文档可不可以写详细一点,我也看不懂啊. 图片放到分包目录下了,不知道怎么引用,试了几次都不行..

    2020-05-28 16:09

  • j***@163.com

    回复 belowfox: 我也看不懂 你解决了吗哥哥

    2020-11-04 15:36

  • j***@163.com

    回复 IT梅: 哥哥 官方的怎么弄得啊 看不懂文档 编译后 子包还是没有图片啊

    2020-11-04 15:37

  • j***@163.com

    回复 DCloud_UNI_GSQ: 哥哥 官方的怎么弄得啊 看不懂文档 编译后 子包还是没有图片啊

    2020-11-04 15:37

1***@qq.com

1***@qq.com

请问这个方案适用于mpvue的小程序吗?

喧尘

喧尘

这样是不是 这些分包图片 还是占用主包的大小的?并不是加载分包时候才加载对应分包图片?

IT梅

IT梅 (作者) - 一个前端开发者

自顶一下,是不是没人知道?

天风

天风

没用啊

  • IT梅 (作者)

    目前用手动复制的方式了,感觉这是这个框架的一个小缺陷

    2019-06-18 15:23

  • z***@163.com

    回复 IT梅: 通过vue.config.js来配置分包静态资源的输出目录,不需要手动来复制

    2019-09-06 09:55

  • IT梅 (作者)

    回复 z***@163.com: 感谢提醒,已经改为vue.config.js来配置了,此操作可行

    2019-09-16 15:22

  • 7***@qq.com

    回复 IT梅: 怎么做的,可以发个代码看看嘛

    2019-09-18 22:52

  • IT梅 (作者)

    回复 7***@qq.com: 您好,在楼下有回复

    2019-09-26 17:58

嗜睡症

嗜睡症

作者你好,图片是怎么放到分包中的呢

  • IT梅 (作者)

    这里回复好像没法贴图,等下我弄个图片的教程

    2019-09-20 15:08

  • 嗜睡症

    回复 IT梅: 好的,多谢了

    2019-09-20 15:12

  • IT梅 (作者)

    回复 嗜睡症: 回复在楼下了

    2019-09-20 15:49

夢新

夢新

作者,有图片的教程吗?

  • IT梅 (作者)

    在这个贴的回复里,有发几个图片

    2019-10-29 09:40

8***@qq.com

8***@qq.com

这个方法不适用于用vue-cli生成的项目,请问,对于用vue-cli生成的项目有什么静态资源分包加载的方案吗?

  • 8***@qq.com

    解决了。楼主的方法可用,只是vue.config.js文件中的打包路径需要修改一下,如下:

    module.exports = {

    configureWebpack: {

    plugins: [

    new CopyWebpackPlugin([

    {

    from: path.join(__dirname, '/src/static_subPackages'),

    to: path.join(__dirname + '/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process

    .env.UNI_PLATFORM, '/')

    }

    ])

    ]

    }

    }

    2019-11-11 15:03

  • IT梅 (作者)

    回复 8***@qq.com: 嗯嗯,能用就好^-^

    2019-11-11 15:36

落魄前端

落魄前端 - 秃头

能上传一个完整的分包 项目 的目录结构 demo 吗?????

s***@gmail.com

s***@gmail.com

你好 我想问一下 主包的页面怎么写才能用分包的图片

3***@qq.com

3***@qq.com

有没有demo案例嘛?我npm install copy-webpack-plugin一直下载不下来

芜湖一

芜湖一

兄弟们我配置的时候发现copy-webpack-plugin 插件是最新版6.0.3的会报错,好像api架构变了,用5.0.0的可以用

1***@qq.com

1***@qq.com

现在官网有了优化方法,那跟楼主的方法冲突吗?两者选其一可以吗?

离之歌

离之歌

大佬,编译正确,但是引用分包的图片没有显示,这是什么原因

zhaoyu2020

zhaoyu2020 - 一只小小鸟

请问 分包一定要安装npm吗 20210118 这个时间点 我按官方的分包了 可是路径老是有问题

ragdoll

ragdoll

我按这种方法做了之后项目运行不了了,把node_modules删了重装也没用,请问怎么解决?

  • a***@foxmail.com

    请问你这个问题解决了嘛?我也遇到了

    2021-01-26 22:06

  • 1***@qq.com

    请问你这个问题解决了嘛?我这也遇到了

    2021-02-03 18:15

  • t***@163.com

    try {

    await result;

    } catch (e) {


        }  

    //     我也没想到npm 下载的文件还能出错,

    2021-03-15 16:12

  • 1***@88.com

    俺也一样,请问怎么解决

    2021-04-01 17:44

  • 3***@qq.com

    解决办法:


    第一步:切换合适的更高版本的node.js(一般在项目的package.json里面会标明依赖的node版本,如果没标,去devDependencies依赖的package.json里面找engines...,依赖的package.json都很规范的详细写了各种信息),


    第二步:执行npm rebuild node-sass


    最后:此时再运行项目就OK啦~~

    2021-05-14 04:59

corgi

corgi

@DCloud前端团队 麻烦看一下 分包加载本地图片的问题 路径一直报错的
分包配置如下
"root":"packageWater",
"pages":[{
"path":"water/index",
"name":"water",
"style": {
"navigationBarTitleText": "测试"
}
}]
引用代码见图片 tree-1.png 在img文件夹里
但路径一直报错 求解 谢谢!!!

  • 3***@qq.com

    今天刚试了这个方法,我也不知道怎么回事,不过我发现使用require引入就不会报路径错误

    2021-05-14 05:01

y***@126.com

y***@126.com - 脉多多

11:17:26.051 ERROR Error loading vue.config.js:
11:17:26.051 ERROR SyntaxError: Unexpected token {
11:17:26.056 D:\Liuwusi\jyxmcrm\CRM-uni\node_modules\p-limit\index.js:29
11:17:26.057 } catch {}
11:17:26.062 ^
11:17:26.062 SyntaxError: Unexpected token {
11:17:26.068 at createScript (vm.js:80:10)
11:17:26.069 at Object.runInThisContext (vm.js:139:10)
11:17:26.075 at Module._compile (module.js:616:28)
11:17:26.076 at Object.Module._extensions..js (module.js:663:10)
11:17:26.082 at Module.load (module.js:565:32)
11:17:26.083 at tryModuleLoad (module.js:505:12)
11:17:26.091 at Function.Module._load (module.js:497:3)
11:17:26.091 at Module.require (module.js:596:17)
11:17:26.098 at require (internal/module.js:11:18)
11:17:26.098 at Object.<anonymous> (D:\Liuwusi\jyxmcrm\CRM-uni\node_modules\copy-webpack-plugin\dist\index.js:14:38)

  • 3***@qq.com

    解决办法:


    第一步:切换合适的更高版本的node.js(一般在项目的package.json里面会标明依赖的node版本,如果没标,去devDependencies依赖的package.json里面找engines...,依赖的package.json都很规范的详细写了各种信息),


    第二步:执行npm rebuild node-sass


    最后:此时再运行项目就OK啦~~

    2021-05-14 05:01

3***@qq.com

3***@qq.com

2021年5月14日,使用帖子的方法出现的几个错误, 1丶node_modules\p-limit\index.js:29一直报错} catch {} 我解决的方法是 第一步:切换合适的更高版本的node.js(其实我node版本就是最新的 v12.13.1) 第二步:执行npm rebuild node-sass 紧接着出现了第二个错误 2丶dirname is not defined 我解决的方法是 path.join(dirname, '/assets') 换成了 path.join(__dirname, '/assets') !!!还有一个地方我没搞懂 3丶src="@/xxx/xxx.png(这样会报错找不到图片) 但是 src="require('@/xxx/xxx.png')"(这样就可以找到图片)
伊人明眸秋水

伊人明眸秋水 - 有一天

我现在接手的一个项目文件太大了,有很多静态资源图片,都放在static文件里面,如果按照这个对应分包放置静态资源图片,这些图片还会占据整体大小吗?

  • 3***@qq.com

    整个小程序所有分包大小不超过 8M

    单个分包/主包大小不能超过 2M

    2021-06-23 16:43

  • zhaoyu2020

    你应该把图片放服务器

    2021-07-23 14:41

_佯装

_佯装

试过了之后,开发者工具代码依赖分析分出来的静态资源包还是在主包里面啊?难不成要把页面也写到分包里吗?

m***@outlook.com

m***@outlook.com

这样是不是 这些分包图片 还是占用主包的大小的?并不是加载分包时候才加载对应分包图片?

那这分包还有个屁用。不如不拆分。

9***@qq.com

9***@qq.com

分包后编辑成小程序代码后图片文件确实在子包文件夹里面 , 但是还是占用主包的大小, 这样的分包没啥意义????

要回复问题请先登录注册