7***@qq.com
7***@qq.com
  • 发布:2023-12-01 10:05
  • 更新:2023-12-16 12:02
  • 阅读:3364

【报Bug】vuecli Vue3/Vite版 组件template内第一行添加注释,打包后class、事件丢失

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22000.1335

HBuilderX类型: 正式

HBuilderX版本号: 3.98

浏览器平台: Chrome

浏览器版本: 最新

项目创建方式: HBuilderX

示例代码:

自定义组件cards

<template>  
    <!-- 注释 -->  
    <view class="content">  
        {{ num }}  
    </view>  
  </template>  

  <script setup>  
  defineProps({  
    num: {  
        default: ''  
    }  
})  
  </script>  

  <style scoped>  
  .content{  
    width: 100%;  
    height: 100rpx;  
    background-color: red;  
  }  
  </style>  

使用cards

<template>  
  <view class="content">  
    <cards :num="item" v-for="item in 6" class="mb-20" @click="hanlderClick(item)" :key="item"/>  
  </view>  
</template>  

<script setup>  
const hanlderClick = (item) => {  
  console.log(item)  
}  
</script>

项目依赖包版本

"dependencies": {  
    "@dcloudio/uni-app": "3.0.0-3090820231124001",  
    "@dcloudio/uni-app-plus": "3.0.0-3090820231124001",  
    "@dcloudio/uni-components": "3.0.0-3090820231124001",  
    "@dcloudio/uni-h5": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-alipay": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-baidu": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-jd": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-kuaishou": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-lark": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-qq": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-toutiao": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-weixin": "3.0.0-3090820231124001",  
    "@dcloudio/uni-mp-xhs": "3.0.0-3090820231124001",  
    "@dcloudio/uni-quickapp-webview": "3.0.0-3090820231124001",  
    "vue": "^3.2.45",  
    "vue-i18n": "^9.1.9"  
  },  
  "devDependencies": {  
    "@dcloudio/types": "^3.3.2",  
    "@dcloudio/uni-automator": "3.0.0-3090820231124001",  
    "@dcloudio/uni-cli-shared": "3.0.0-3090820231124001",  
    "@dcloudio/uni-stacktracey": "3.0.0-3090820231124001",  
    "@dcloudio/vite-plugin-uni": "3.0.0-3090820231124001",  
    "@vue/runtime-core": "^3.2.45",  
    "vite": "4.0.3"  
  }

vite.config.js

import { defineConfig } from 'vite'  
import uni from '@dcloudio/vite-plugin-uni'  
// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [  
    uni(),  
  ],  
  build: {  
    // outDir: 'customDist'  
  }  
})  

操作步骤:

vuecli Vue3/Vite版,从官网提供的下载一个项目模板。
创建一个自定义组件cards,组件内template中第一行写上注释<!-- 注释 -->,其他正常写。
在其他页面引入cards组件并使用,在cards组件上添加class和click事件。
<cards class="mb-20 block" @click="clickHandler"/>

项目在运行阶段一切正常,打包后class丢失,click点击无效。
npm run build:h5

预期结果:

打包后class、click不丢失

实际结果:

打包后class、click丢失

bug描述:

vuecli Vue3/Vite版,从官网提供的下载一个项目模板。
创建一个自定义组件cards,组件内template中第一行写上注释<!-- 注释 -->,其他正常写。
在其他页面引入cards组件并使用,在cards组件上添加class和click事件。
<cards class="mb-20 block" @click="clickHandler"/>

项目在运行阶段一切正常,打包后class丢失,click点击无效。
npm run build:h5

2023-12-01 10:05 负责人:YUANRJ 分享
已邀请:

最佳回复

DCloud

DCloud

HBuilderX 3.99.2023121601-alpha 已修复。

爱豆豆

爱豆豆 - 办法总比困难多

确实有这么个问题
你可以先用自定义事件解决这个问题
自定义组件cards

<template>  
    <!-- 注释 -->  
    <view class="content" @tap="emit('cardTap')">  
        {{ num }}  
    </view>  
</template>  

<script setup>  
    const emit = defineEmits(['cardTap'])  
    defineProps({  
        num: {  
            default: ''  
        }  
    })  
</script>  

<style scoped>  
    .content {  
        width: 100%;  
        height: 100rpx;  
        background-color: red;  
    }  
</style>

使用cards


<template>    
  <view class="content">    
    <cards :num="item" v-for="item in 6" class="mb-20" @cardTap="hanlderClick(item)" :key="item"/>    
  </view>    
</template>    

<script setup>    
const hanlderClick = (item) => {    
  console.log(item)    
}    
</script>
  • 7***@qq.com (作者)

    谢解答!

    这样确实可以解决点击事件的问题,但不光是click事件丢失,class也同样丢失。

    临时的解决方案倒是有,比如给cards包一层标签使用,class、click全绑在外层标签上。

    但这不是很好的方式,我使用cli版本的目的是自动化构建,代码写的符合规范,运行正常,编译出问题,这给开发带来很大的不确定性和开发成本。

    2023-12-01 10:43

YUANRJ

YUANRJ

临时解决方案:替换附件文件到 node_modules/@dcloudio/vite-plugin-uni/bin/uni.js,然后重新build。

  • 1***@qq.com

    如果是用GIT命令在服务端npm安装并build的话,该怎么解决?

    2024-01-05 20:47

  • YUANRJ

    回复 1***@qq.com: 该问题已经修复了,如果是cli项目,执行npx @dcloudio/uvm@latest升级到最新版即可。

    2024-01-06 10:39

7***@qq.com

7***@qq.com (作者)

HbuilderX构建发行H5一切正常,加注释也打包结果也正常。应该就是uniapp vue3+vite版的编译包的问题。
给官方提个bug,尽快完善

7***@qq.com

7***@qq.com (作者)

这个bug给废老大劲才发现,完整的一个项目转到CLI版,运行一切正常,一打包很多样式和事件没了。试了很多方法,从来没往注释的方向想。一个完整的项目最后给我删到只有一个组件,一个页面,所有依赖配置全部删掉,最后才发现是一个注释引起的。一个注释浪费了我一周的时间......

YUANRJ

YUANRJ

感谢反馈,已复现问题,后续会修复。

要回复问题请先登录注册