60late / vite-plugin-minipic

Based on sharp.js, compress your image before vite generate bundle. It's easy and fast! 基于sharp.js的vite图片压缩插件,又快又好用!
31 stars 4 forks source link

打包时未能识别到图片 #5

Closed dddepg closed 6 months ago

dddepg commented 7 months ago

大佬好,我在项目中使用您的插件时出现了这个问题: 在我的项目中存在如图所示的图片:

image

我通过一个 hook 来拼接图片 url:

const getImageUrl = (url, prefix = '') => {
  return `/imgs/${prefix ? `${prefix}/` : ''}${url}`
}

在 vite.config.js 中进行如下设置:

export default defineConfig({
  plugins: [
    vue(),
    minipic({
      sharpOptions: {
        png: {
          quality: 70,
          compressionLevel: 7
        }
      },
      cache: false,
    }), // 压缩图片插件
    ...other plugins
  ]
  ...other setting
})

但是当我执行 build 之后,控制台显示项目中未发现图片:

image

60late commented 7 months ago

你好,目前压缩时对 public 文件下的资源压缩存在 bug,已查明原因,将在下一个版本中修复 可以考虑暂时将 public 文件夹下的资源放到 src/assets/ 目录下 感谢你的issue

60late commented 6 months ago

你好,目前对仓库进行了重构,增加了public文件夹下内容的压缩,并且修复了目前已知的一些问题, 把本插件升级至V1.1.0后再试试

dddepg commented 6 months ago

目前已升级至 1.1.0,但是使用时发现一些奇怪的路径问题:

image

如下图报错所示,插件似乎并没有去寻找 /public 下的图片文件,反倒是在寻找 node_modules/.cache/public 下的图片文件

image

因此我将我的 public 文件夹复制了一份到 node_modules/.cache 目录下,此时插件可以正常获取到全部图片:

image

但是我对比了一下图片大小,发现插件似乎仅将 node_modules/.cache 目录下的图片进行了处理,并没有将其输出到 dist 文件夹中。

考虑到 .cache 文件夹中的文件似乎是之前通过 import xxx from '@/src/assect/xxx.png 方式引入的图片,旧版本插件的输出缓存是否对新版本插件的判断产生了一些影响?

60late commented 6 months ago

插件会读取public目录下所有内容,无论是否开启cache模式都会存一份压缩后的备份在node_modules/.cache目录下。

目前无法复现你的问题,可以尝试以下操作: 1.升级插件至v1.1.1版本,此版本修复了win和mac文件分割线不同的问题 2.删除node_modules/.cache文件夹,再次运行打包尝试

dddepg commented 6 months ago

升级插件至v1.1.1版本后插件不再报错