uni-app H5下发行编译后与开发时差异，组件style样式丢失问题（vue3）

uni-app H5下发行编译后与开发时差异，组件style样式丢失问题（vue3）

操作步骤：

已上传最小demo附件，可以在开发时运行和编译后运行对比差异。

预期结果：

属性style不被编译器干掉，正常显示结果

实际结果：

属性style被编译器干掉了

bug描述：

IDE下创建的uniapp项目，H5 发行编译后出现与开发时组件样式差异（vue3）。
元素上的属性style会被编译器干掉。

信息类别 详情
产品分类 uniapp/H5
PC开发环境 Windows
版本号 11
HBuilderX 正式, 版本号 3.2.16
浏览器平台 Chrome
浏览器版本 96.0.4664.110
项目创建方式 HBuilderX

Image 1 Image 2

demo.zip


更多关于uni-app H5下发行编译后与开发时差异，组件style样式丢失问题（vue3）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

https://ask.dcloud.net.cn/question/136238 你的应该是这个问题

更多关于uni-app H5下发行编译后与开发时差异，组件style样式丢失问题（vue3）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


差不多，编译后style属性被干掉了。

改成vue2试试

vue2可以的，但我在做vue3组件库的兼容。一定得用vue3，期待可以被修复。

这个等待官方的修复吧,给你的那个帖子,已经确认bug了反正,估计修复指日可待了

回复 小枫叶: 谢谢你，已完美解决

更新至最新HBuilderX Alpha

谢谢你，已完美解决

在uni-app H5发行编译后出现组件style样式丢失的问题，通常是由于Vue3的编译器优化或uni-app构建流程差异导致的。根据你提供的信息，这属于Vue3在H5平台下的特定编译行为。

问题分析：

  1. 在开发环境下，Vue3会保留元素上的动态style绑定，以便于热重载和调试。
  2. 在生产构建时，编译器会对静态和动态样式进行优化，可能导致部分内联style被合并或移除，尤其是在H5平台下。

解决方案：

  1. 使用CSS类替代内联style：将样式定义在<style>标签或外部CSS文件中，通过class绑定动态样式。

    <template>
  <view :class="dynamicClass"></view>
</template>
<script setup>
const dynamicClass = computed(() => ({ color: isActive ? 'red' : 'blue' }));
</script>

  2. 使用Vue3的v-bind语法：在Vue3中，可以通过v-bind在CSS中绑定动态值，避免内联style被优化。

    <style scoped>
.element {
  color: v-bind('dynamicColor');
}
</style>
回到顶部