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

分类：uni-app

bug已修复

产品分类： 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 分享

6 个回复

最佳回复

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

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

uni.js_.zip

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