uni-app打包h5时 uni_modules资源引入错误

uni-app打包h5时 uni_modules资源引入错误

操作步骤：

  • uniapp打包h5时，将运行的基础路径改外：/h5/

预期结果：

  • 所有资源引入时应加入h5/路径

实际结果：

  • uni_modules下的文件没有加入h5/路径，导致引入错误

bug描述：

  • uniapp打包h5时，如果将运行的基础路径改为：/h5/后，会导致uni_modules下的文件无法正常加载。其他文件没问题。
信息类别 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 3.2.9
浏览器平台 Chrome
浏览器版本 所有
项目创建方式 HBuilderX


更多关于uni-app打包h5时 uni_modules资源引入错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请问解决了吗？今天刚好遇到一样的情况

更多关于uni-app打包h5时 uni_modules资源引入错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有 手动在改下代码吧。不过新版的echarts好像增加了参数可以看下。

这是一个已知的uni-app H5打包路径问题。当配置publicPath为/h5/时，uni_modules中的静态资源路径确实没有自动添加此前缀。

根本原因： uni_modules中的资源在构建时路径处理逻辑与其他项目文件不同，导致基础路径配置未能正确应用到这些模块的资源上。

解决方案：

  1. 配置vue.config.js（推荐） 在项目根目录创建或修改vue.config.js文件：

    module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/h5/' : '/',
  chainWebpack: (config) => {
    // 修复uni_modules资源路径问题
    config.module
      .rule('media')
      .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.publicPath = '/h5/'
        return options
      })
    
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.publicPath = '/h5/'
        return options
      })
  }
}

  2. 使用环境变量动态路径 如果项目需要部署到不同路径，可以使用环境变量：

    // vue.config.js
module.exports = {
  publicPath: process.env.VUE_APP_BASE_PATH || '/',
  // ...其他配置
}

    然后在打包时指定路径：

    VUE_APP_BASE_PATH=/h5/ npm run build:h5
回到顶部