uni-app 打包时遇nvue样式异常导致打包中断失败

uni-app 打包时遇nvue样式异常导致打包中断失败

操作步骤：

  • 打包编译时触发

预期结果：

  • 之前报nvue样式错误还是可以正常打包，希望还是能正常打包

实际结果：

  • 可以编译，运行到手机端没有问题。打包时直接中断了

bug描述：

打app包时，报一堆nvue异常，然后打包程序直接中断了。

经过我一顿修改，现在就报这些错误了，但是全局搜索都没有查到‘-webkit-transform-origin’和‘-webkit-transform’这两个属性。

打包依然是不行的，直接就中断打包流程了，也没有任何其他报错

[HBuilder] 16:29:41.752 项目 'app-rn' 开始编译...
[HBuilder] 16:29:45.831 当前项目的uniCloud使用的默认服务空间spaceId为：mp-a1508353-f015-4afa-89cd-7c510436bd40
[HBuilder] 16:29:45.858 4.15
[HBuilder] 16:29:45.883 正在编译中...
[HBuilder] 16:29:48.703 uni-app 有新版本发布，请执行 `npx @dcloudio/uvm@latest` 更新，更新日志详见：https://download1.dcloud.net.cn/hbuilderx/changelog/4.08.2024040127.html
[HBuilder] 16:30:20.893 nvue中不支持如下css。如全局或公共样式受影响，建议将告警样式写在ifndef APP-PLUS-NVUE的条件编译中，详情如下：
[HBuilder] 16:30:20.933 WARNING: `-webkit-transform-origin` is not a standard property name (may not be supported) at uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue:1029
[HBuilder] 16:30:20.989 项目 'app-rn' 编译成功。
[HBuilder] 16:30:21.161 WARNING: `-webkit-transform` is not a standard property name (may not be supported) at uni_modules/uni-im/pages/chat/chat.nvue:226
[HBuilder] 16:30:21.196 ERROR: Selector `.uni-popup .uni-popup__wrapper` is not supported. Weex only support classname selector at uni_modules/uni-popup/components/uni-popup/uni-popup.vue:163
[HBuilder] 16:30:21.239 ERROR: property value `-webkit-sticky` is not supported for `position` (supported values are: `relative`|`absolute`|`sticky`|`fixed`) at uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue:161
[HBuilder] 16:30:21.274 WARNING: `-webkit-transform` is not a standard property name (may not be supported) at uni_modules/uni-im/components/uni-im-control/uni-im-control.vue:193
[HBuilder] 16:30:21.309 WARNING: `-webkit-transform` is not a standard property name (may not be supported) at uni_modules/uni-im/components/uni-im-control/uni-im-control.vue:203
[HBuilder] 16:30:21.332 WARNING: `-webkit-transform` is not a standard property name (may not be supported) at uni_modules/uni-im/components/uni-im-control/uni-im-control.vue:207
[HBuilder] 16:30:21.369 运行方式：打开 HBuilderX, 导入 dist\build\app-plus 运行。
[HBuilder] 16:30:21.415 WARNING: `-webkit-transform` is not a standard property name (may not be supported) at uni_modules/uni-badge/components/uni-badge/uni-badge.vue:167
[HBuilder] 16:30:21.454 WARNING: `-webkit-transform-origin` is not a standard property name (may not be supported) at uni_modules/uni-badge/components/uni-badge/uni-badge.vue:169
[HBuilder] 16:30:21.498 WARNING: `-webkit-transform` is not a standard property name (may not be supported) at uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue:181
[HBuilder] 16:30:21.539 WARNING: `-webkit-transform` is not a standard property name (may not be supported) at uni_modules/uni-im/components/uni-im-msg/uni-im-msg.vue:252
[HBuilder] 16:30:21.582 WARNING: `-webkit-transform` is not a standard property name (may not be supported) at uni_modules/uni-im/components/uni-im-msg/uni-im-msg.vue:285

更多关于uni-app 打包时遇nvue样式异常导致打包中断失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

可以提交一个能重现该问题的测试工程

更多关于uni-app 打包时遇nvue样式异常导致打包中断失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我上传了一个仅管理员可见的附件，你看看能不能看到

回复 9***@qq.com: 看不到，你确认下是不是上传成功了

回复 DCloud_UNI_FengXY: 我重新上传了一下，这次确认上传成功了

离谱的来了，，，我同事可以打包，他的hbuilderx是4.08版本的，我是4.15版本的，应该是编译器的问题

打包失败的问题还是存在，在同事电脑可以正常打包，我这边偶尔有时候碰巧也能打出来，但是进去只显示tabbar。这个问题不知道怎么排查

还是这个问题， 无法继续 Debug

在使用 uni-app 进行打包时，如果遇到 nvue 样式异常导致打包失败的情况，可能是由于 nvue 文件的样式编写不规范或存在兼容性问题。以下是一些可能的解决方案和排查步骤：

1. 检查 nvue 文件样式

  • nvue 使用的是原生渲染，样式写法与普通 vue 文件有所不同，部分 CSS 属性可能不被支持。
  • 确保样式符合 nvue 的规范，参考 uni-app nvue 样式文档。

常见问题：

  • 使用了不支持的单位（如 em、rem），应使用 px。
  • 使用了不支持的 CSS 属性（如 box-shadow、flex-grow）。
  • 样式嵌套层级过多，nvue 对样式嵌套支持有限。

2. 检查样式语法

  • 确保样式语法正确，避免以下问题：
    • 缺少分号 ;
    • 属性值错误
    • 选择器格式错误
  • 使用 CSS 校验工具（如 CSS Lint）检查样式文件。

3. 检查平台兼容性

  • nvue 在不同平台（如 iOS、Android）上的表现可能不同。
  • 确保样式在目标平台上兼容，可以通过 uni.getSystemInfoSync().platform 获取当前平台并动态调整样式。

4. 检查打包日志

  • 查看打包日志，找到具体的错误信息，定位问题文件。
  • 如果日志不明确，可以尝试逐步注释 nvue 文件的样式，找到导致问题的具体代码。

5. 更新 uni-app 版本

  • 确保使用的是最新版本的 uni-app，老版本可能存在已知的 nvue 样式问题。
  • 运行以下命令更新：
    npm install -g @vue/cli
npm update

6. 关闭自定义组件模式

  • 如果使用了自定义组件模式，尝试关闭以排除问题。
  • 在 pages.json 中设置 "style": "v2"，关闭自定义组件模式。

7. 清理缓存并重新打包

  • 清理项目缓存后重新打包：
    rm -rf node_modules
rm -rf unpackage
npm install
npm run dev:%PLATFORM%
回到顶部