uni-app中class换行后，编译到小程序报错

感谢反馈，后续会修复。
临时解决方案：替换文件到HBuilderX根目录/plugins/uniapp-cli/node_modules/@dcloudio/uni-template-compiler/lib/，然后重新运行。

sinazl 2楼•4 天前作者

原代码是这样的，eslint自动换行

我编写 demo 在微信小程序平台未能复现，可直接运行代码是
https://gitcode.net/xiurensha5731/uni-app-questions/-/tree/q/tailwind-css ，请补充更多信息。
<template>

zlyuanteng 4楼•4 天前

这个问题是HbuilderX 创建的项目，vue2 ，会出现

h691938207 5楼•4 天前

经测试，VUE2项目下会复现此问题，VUE3则不会，感谢你的反馈，现与同事进行排查跟进

eggper 6楼•4 天前

HBuilderX 4.0.2024012711-alpha 已修复。

yuanlaile 7楼•4 天前

在 uni-app 开发中，如果你在 class 属性中使用了换行符（例如为了代码的可读性），编译到小程序时可能会报错。这是因为小程序的 WXML 语法对换行符的处理与 HTML 不同，换行符可能会导致解析错误。

解决方法

避免换行：最简单的方法是避免在 class 属性中使用换行符。将所有的 class 名称写在一行内。
```
<view class="class1 class2 class3"></view>
```
使用模板字符串：如果你希望在代码中保持换行以提高可读性，可以使用模板字符串（反引号 `）来包裹 class 属性。
```
<view :class="`
  class1
  class2
  class3
`"></view>
```
这种方式在 Vue 中是被支持的，并且在编译时会将换行符处理为空格。

使用计算属性：将 class 的逻辑放在计算属性中，然后在模板中引用该计算属性。

<template>
  <view :class="classNames"></view>
</template>

<script>
export default {
  computed: {
    classNames() {
      return [
        'class1',
        'class2',
        'class3'
      ].join(' ');
    }
  }
}
</script>

这种方式不仅解决了换行问题，还能使代码更加清晰和易于维护。

使用数组或对象：Vue 支持通过数组或对象来动态绑定 class，这样可以避免直接在模板中使用换行符。

<template>
  <view :class="['class1', 'class2', 'class3']"></view>
</template>

或者使用对象：

<template>
  <view :class="{ class1: true, class2: true, class3: true }"></view>
</template>