uni-app NODE_ENV=production 编译 h5时 picker 组件点击无效

uni-app NODE_ENV=production 编译 h5时 picker 组件点击无效

示例代码：

<picker class="item" mode="date" @change="onChangeDate">  
    <view class="flex-row flex-items-center">  
        <view class="title flex-1"><text>出生日期</text></view>  
        <view class="content">  
            <text class="text">{{form.birthday || '请选择出生日期'}}</text>  
        </view>  
    </view>  
</picker>

操作步骤：

使用以下命令打包：

cross-env NODE_ENV=production VUE_APP_ENV='production' UNI_PLATFORM=h5 vue-cli-service uni-build

预期结果：

正常使用 picker 组件

实际结果：

picker 的选择框不可用。出现异常时，查看 dom 结构发现 .uni-picker-mask 对应的 div 的 style 包含 display: none。

bug描述：

NODE_ENV=development 时一切正常，NODE_ENV=production 时 picker 组件（mode="date"）无法正常使用。出现异常时，查看 dom 结构发现 .uni-picker-mask 对应的 div 的 style 包含 display: none。


更多关于uni-app NODE_ENV=production 编译 h5时 picker 组件点击无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

开发环境有效 发布环境无效,是这意思么 但是这貌似不符合逻辑 开发环境行 为什么正式环境就不行了呢

更多关于uni-app NODE_ENV=production 编译 h5时 picker 组件点击无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


正式环境打包会执行摇树优化、代码压缩等操作，应该是这些有影响。

升级 @dcloudio/uni-xxx 相关依赖版本为 2.0.1-34720220422002 解决了，出现问题的版本：2.0.0-31920210609001

在使用 uni-app 开发 H5 应用时，如果你在 NODE_ENV=production 模式下编译后，发现 picker 组件点击无效，可能是由于以下原因导致的：

1. 生产环境下的代码压缩或优化问题

在生产环境下，uni-app 会对代码进行压缩和优化，这可能会导致某些组件的功能出现异常。你可以尝试以下方法来解决：

  • 关闭代码压缩： 在 manifest.json 文件中，找到 h5 配置项，关闭 uglifyJs 和 minify 选项：

    {
  "h5": {
    "optimization": {
      "uglifyJs": false,
      "minify": false
    }
  }
}

  • 检查生产环境下的样式问题： 有时候，生产环境下的样式可能会影响组件的点击事件。你可以通过浏览器的开发者工具检查 picker 组件的样式，确保没有样式覆盖或遮挡了点击区域。

2. 事件绑定问题

在生产环境下，某些事件绑定可能会失效。你可以尝试以下方法：

  • 手动绑定事件： 在 picker 组件上手动绑定 @click 事件，确保事件能够正常触发：

    <picker @click="handlePickerClick">
  <view>选择器</view>
</picker>

<script>
export default {
  methods: {
    handlePickerClick() {
      console.log('Picker clicked');
    }
  }
}
</script>

3. 检查 picker 组件的使用方式

确保你正确使用了 picker 组件。picker 组件通常需要与 [@change](/user/change) 事件一起使用，以处理用户选择的值：

<picker [@change](/user/change)="handlePickerChange">
  <view>选择器</view>
</picker>

<script>
export default {
  methods: {
    handlePickerChange(event) {
      console.log('Selected value:', event.detail.value);
    }
  }
}
</script>

4. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app。旧版本可能存在一些已知的 bug，更新到最新版本可能会解决问题。

npm update [@dcloudio](/user/dcloudio)/uni-app

5. 调试生产环境

如果问题仍然存在，你可以尝试在生产环境下进行调试。你可以通过以下步骤来调试：

  • 启用 source map： 在 manifest.json 文件中，启用 sourceMap 选项：

    {
  "h5": {
    "devServer": {
      "sourceMap": true
    }
  }
}
回到顶部