uni-app 打包成h5时图片存放在不同目录下导致打包结果出现多个文件夹

uni-app 打包成h5时图片存放在不同目录下导致打包结果出现多个文件夹

操作步骤：

  • 在不同页面目录下创建图片目录，然后引入到页面

预期结果：

  • 希望是都打包到static下

实际结果：

  • 并没有合并到static文件夹下，以前打包出来整体名为h5时是可以的

bug描述：

以前打包web都只有一个 static 和 index.html 2个文件
现在打包变成了5个文件，可能是因为我把图片存放分散在各个目录
能不能改回以前一样，即使是分散在不同的目录也统一打包在static下

Image 1 Image 2


更多关于uni-app 打包成h5时图片存放在不同目录下导致打包结果出现多个文件夹的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

HBuilderX 4.16.2024051009-alpha 已修复。

更多关于uni-app 打包成h5时图片存放在不同目录下导致打包结果出现多个文件夹的实战教程也可以访问 https://www.itying.com/category-93-b0.html


出现asset目录是因为你的资源没有放在static下，并且手动引用了。参考

不只是出现asset 和 static目录 ，pages 和 topic 也是打包后出现的

图片目录： pages/buy_cards/static/card-banner.jpg 页面目录： pages/buy_cards/buy_cards.vue

// 引用 这个图片并没有打到 asset 目录 而是保留到图片存放目录，出现 topic 目录也是一样的原因 <image src="./static/card-banner.jpg"></image>

回复 yoooo: static是copy过去的，非static的资源才会assets下，分包下的static也会copy

回复 DCloud_UNI_FengXY: 现在 pages/buy_cards/static/card-banner.jpg 这个图片是非static的，并没有打包在assets下，而是原封不动的打包在原路径

回复 yoooo: 你的pages/buy_cards是分包吗？如果是分包，那就是正常的，因为分包里也支持static目录

回复 DCloud_UNI_FengXY: 不是分包，也static目录没关系，我重新上传了一个图片，你看看打包的出来的目录，没在static目录下的图片并没有打包在assets目录下

回复 yoooo: 已确认，是vue2项目有bug，只要目录名为static，不管是不是根目录的、分包目录的，都会保留原始目录结构，而不是编译到assets中，后续版本会修复此问题。最终是根目录、分包目录的static保留原始目录结构，其他地方的统一编译到assets下。

回复 DCloud_UNI_FengXY: vue3也是，分包下的static下的文件打包后还在，和asset目录里的图片重复了

在使用 Uni-App 打包成 H5 时，如果图片存放在不同的目录下，可能会导致打包结果中出现多个文件夹。这是因为 Uni-App 在打包过程中会根据资源的路径结构来生成对应的文件夹结构。

问题原因

Uni-App 在打包 H5 时，会将项目中的静态资源（如图片、字体等）复制到 dist 目录下。如果这些资源存放在不同的目录中，Uni-App 会按照相对路径结构来生成文件夹，以确保资源的路径与开发时保持一致。

例如，如果你的项目结构如下：

src/
├── assets/
│   ├── images/
│   │   ├── image1.png
│   │   ├── image2.png
├── pages/
│   ├── index/
│   │   ├── images/
│   │   │   ├── image3.png

在打包成 H5 后，dist 目录可能会生成如下的结构：

dist/
├── assets/
│   ├── images/
│   │   ├── image1.png
│   │   ├── image2.png
├── pages/
│   ├── index/
│   │   ├── images/
│   │   │   ├── image3.png

解决方案

如果你希望所有的图片都放在同一个目录下，可以通过以下方式来解决：

1. 统一图片存放路径

将所有图片都放在同一个目录下，例如 src/assets/images/，然后在代码中引用时使用统一的路径。

2. 使用 copy-webpack-plugin

如果你无法将所有图片放在同一个目录下，可以通过配置 copy-webpack-plugin 来将不同目录下的图片复制到同一个目录中。

在 vue.config.js 中进行如下配置：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: 'src/assets/images', to: 'assets/images' },
          { from: 'src/pages/index/images', to: 'assets/images' },
        ],
      }),
    ],
  },
};

这样，所有图片都会被复制到 dist/assets/images/ 目录下。

3. 使用 url-loader 或 file-loader

你可以通过配置 url-loader 或 file-loader 来处理图片资源，并指定输出路径。

在 vue.config.js 中进行如下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.fallback.options.name = 'assets/images/[name].[hash:8].[ext]';
        return options;
      });
  },
};
回到顶部