uniapp 打包h5 图片地址多了assets如何解决？

在uniapp中打包H5时，生成的图片路径自动添加了assets前缀，导致图片加载失败。例如实际路径应为/static/logo.png，但打包后变成了/assets/static/logo.png。尝试修改vue.config.js或manifest.json中的配置均未生效，请问如何正确配置才能去除这个多余的路径前缀？

2 回复

在vue.config.js中配置publicPath为./，并检查static目录路径。如果用了@别名，确保路径正确。


在 UniApp 打包 H5 时，图片地址中多出 assets 路径通常是由于静态资源路径处理问题导致的。以下是解决方案：

1. 检查图片引用方式

  • 绝对路径问题：如果图片使用绝对路径（如 /static/logo.png），在 H5 中可能被解析为 域名/assets/static/logo.png。
  • 正确做法：使用相对路径或 @ 别名：
    <!-- 相对路径 -->
<image src="../../static/logo.png"></image>
<!-- 或使用 @ 别名 -->
<image src="@/static/logo.png"></image>

2. 配置 vue.config.js

在项目根目录创建或修改 vue.config.js，设置 publicPath 为 ./：

module.exports = {
  publicPath: './',
  // 其他配置...
};

这确保静态资源路径为相对路径，避免自动添加 assets。

3. 动态图片处理

如果使用动态绑定图片路径，确保路径正确：

// 错误示例（可能多出 assets）
data() {
  return {
    imgSrc: '/static/logo.png'
  }
}

// 正确示例（使用 require 或相对路径）
data() {
  return {
    imgSrc: require('@/static/logo.png') // 或 './static/logo.png'
  }
}

在模板中：

<image :src="imgSrc"></image>

4. 检查 manifest.json 配置

在 H5 配置中设置基础路径：

{
  "h5": {
    "publicPath": "./",
    // 其他配置...
  }
}

5. 构建后验证

  • 执行 npm run build:h5 后，检查 dist/build/h5 目录中的图片路径是否正确。
  • 如果问题仍在，尝试清理缓存重新打包。

总结

通过调整路径引用方式、配置 publicPath 及使用相对路径，可解决 H5 打包中图片地址多出 assets 的问题。优先检查代码中的路径写法，确保与构建配置一致。

回到顶部