uni-app 【报Bug】vuecli Vue3/Vite版 组件template内第一行添加注释后打包class、事件丢失
uni-app 【报Bug】vuecli Vue3/Vite版 组件template内第一行添加注释后打包class、事件丢失
产品分类：
uniapp/H5
示例代码：
自定义组件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](/user/dcloudio)/uni-app": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-app-plus": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-components": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-h5": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-alipay": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-baidu": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-jd": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-kuaishou": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-lark": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-qq": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-toutiao": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-weixin": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-mp-xhs": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-quickapp-webview": "3.0.0-3090820231124001",
"vue": "^3.2.45",
"vue-i18n": "^9.1.9"
},
"devDependencies": {
"[@dcloudio](/user/dcloudio)/types": "^3.3.2",
"[@dcloudio](/user/dcloudio)/uni-automator": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-cli-shared": "3.0.0-3090820231124001",
"[@dcloudio](/user/dcloudio)/uni-stacktracey": "3.0.0-3090820231124001",
"[@dcloudio](/user/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](/user/dcloudio)/vite-plugin-uni'
export default defineConfig({
plugins: [
uni(),
],
build: {
// outDir: 'customDist'
}
})
10 回复
确实有这么个问题
你可以先用自定义事件解决这个问题
自定义组件cards
<template>
<view class=“content” @tap=“emit(‘cardTap’)”>
{{ num }}
</view>
</template>
使用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>
这个bug给废老大劲才发现，完整的一个项目转到CLI版，运行一切正常，一打包很多样式和事件没了。试了很多方法，从来没往注释的方向想。一个完整的项目最后给我删到只有一个组件，一个页面，所有依赖配置全部删掉，最后才发现是一个注释引起的。一个注释浪费了我一周的时间…
在 uni-app 中使用 Vue 3 和 Vite 构建项目时，如果在组件的 template 内第一行添加注释，可能会导致打包后 class 和事件丢失的问题。这通常是由于 Vite 的模板解析或 uni-app 的编译机制在处理注释时出现了问题。
解决方案
-
避免在
template第一行添加注释： 最简单的解决方案是避免在template的第一行添加注释。将注释放在template的其他位置，或者放在script标签内。<template> <!-- 不要在这里添加注释 --> <div class="container" @click="handleClick"> <!-- 可以在这里添加注释 --> <p>Hello World</p> </div> </template> -
使用
v-pre指令： 如果你确实需要在template的第一行添加注释，可以尝试使用v-pre指令来跳过该部分的编译。<template> <!-- 使用 v-pre 指令 --> <div v-pre><!-- 这里是注释 --></div> <div class="container" @click="handleClick"> <p>Hello World</p> </div> </template> -
检查
Vite和uni-app的版本： 确保你使用的是最新版本的Vite和uni-app，因为这个问题可能已经在后续版本中修复。npm update vite [@dcloudio](/user/dcloudio)/uni-app
