uni-app vue-cli打包vue3+vite项目时class、点击事件被删除

问题描述

使用vue-cli创建的vue3 vite版项目，使用官方提供项目框架模板。官方模板：https://gitee.com/dcloud/uni-preset-vue/blob/vite/package.json

自定义组件，在外层添加的class、点击事件

&lt;orderCard v-for="(item, ind) in orderList" :key="ind" :cardInfo="item"  
            class="mb-20" @tap="jumpOrderDetail(item)" /&gt;

这段在vue-cli构建的项目中，运行时正常，但build 打包后，class丢失点击事件无效，是什么原因？在HBuilderX编辑器当中，运行、打包均正常。

求解，我需要同样的代码在HBuilderX中编译打包和使用vue-cli打包结果一致


### 表格

| 信息类型 | 信息 |
| --- | --- |
| 开发环境 | vue-cli, HBuilderX |
| 版本号 | vue3, vite |
| 项目创建方式 | 使用官方提供项目框架模板 |

yuanlaile 1楼•5 天前作者

在使用 uni-app 和 vue-cli 打包 Vue 3 + Vite 项目时，如果发现 class 和点击事件被删除，可能是由于以下几个原因导致的：

1. Tree Shaking 和代码优化

Vite 和 Vue 3 默认会启用 Tree Shaking 和代码优化，这可能会导致一些未使用的代码被删除。如果你在代码中使用了动态绑定的 class 或事件，但它们在编译时被认为是未使用的，可能会被删除。

解决方法：

确保你的 class 和事件绑定在代码中被明确使用。
如果你使用了动态绑定的 class 或事件，确保它们在模板中被正确引用。

2. Vite 配置问题

Vite 的配置可能会影响最终的打包结果。如果你在 vite.config.js 中配置了某些优化选项，可能会导致 class 和事件被删除。

解决方法：

检查 vite.config.js 中的配置，确保没有启用过于激进的优化选项。
如果你使用了 [@vitejs](/user/vitejs)/plugin-vue，确保它的配置正确。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '[@vitejs](/user/vitejs)/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'terser', // 确保使用 Terser 进行压缩
    terserOptions: {
      compress: {
        drop_console: false, // 避免删除 console 语句
        keep_classnames: true, // 保留类名
        keep_fnames: true, // 保留函数名
      },
    },
  },
});

3. uni-app 的编译问题

uni-app 在编译时可能会对代码进行一些处理，导致 class 和事件被删除。特别是在使用 vue-cli 打包时，可能会与 uni-app 的编译逻辑产生冲突。

解决方法：

确保你使用的是最新版本的 uni-app 和 vue-cli。
检查 uni-app 的配置文件，确保没有启用过于激进的优化选项。

4. 模板语法问题

如果你在模板中使用了动态绑定的 class 或事件，确保它们的语法是正确的。例如，动态 class 应该使用 :class 绑定，事件应该使用 @ 或 v-on 绑定。

解决方法：

检查模板中的 class 和事件绑定语法，确保它们是正确的。

<template>
  <div :class="dynamicClass" @click="handleClick">Click me</div>
</template>

<script>
export default {
  data() {
    return {
      dynamicClass: 'my-class',
    };
  },
  methods: {
    handleClick() {
      console.log('Clicked');
    },
  },
};
</script>

5. CSS 和 JavaScript 的压缩问题

在打包过程中，CSS 和 JavaScript 文件可能会被压缩，导致 class 和事件被删除或混淆。

解决方法：

确保在打包配置中禁用或调整 CSS 和 JavaScript 的压缩选项。

// vite.config.js
export default defineConfig({
  build: {
    cssCodeSplit: false, // 禁用 CSS 代码分割
    minify: false, // 禁用压缩
  },
});