Lemon_Tree
Lemon_Tree
  • 发布:2022-12-09 13:09
  • 更新:2022-12-09 15:34
  • 阅读:132

【报Bug】vue-cli创建的项目,与tailwindcss接口, 打包支付宝小程序报错

分类:uni-app

产品分类: uniapp/小程序/阿里

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 家庭中文版21H2

第三方开发者工具版本号: 3.2.6

基础库版本号: 2.8.0

项目创建方式: CLI

CLI版本号: 3.0.0-alpha-3060420220922001

示例代码:

报错

      <view  
        v-for="(item,index) in table.list"  
        :key="index"  
        class="mt-[41rpx] text-center tracking-[2.8rpx]"  
        :class="[table.index === index ? 'text-theme' : 'text-main']"  
        @tap="fetchHotDetail(item, index)"  
      >  
        {{ item.name }}  
      </view>  

不会报错

      <view  
        v-for="(item,index) in table.list"  
        :key="index"  
        :class="[table.index === index ? 'text-theme test' : 'text-main test']"  
        @tap="fetchHotDetail(item, index)"  
      >  
        {{ item.name }}  
      </view>  

操作步骤:

如下,存在多个class,一个固定,一个动态;

      <view  
        v-for="(item,index) in table.list"  
        :key="index"  
        class="mt-[41rpx] text-center tracking-[2.8rpx]"  
        :class="[table.index === index ? 'text-theme' : 'text-main']"  
        @tap="fetchHotDetail(item, index)"  
      >  
        {{ item.name }}  
      </view>  

预期结果:

能正常编译,且class有效。

实际结果:

支付宝小程序启动异常!

bug描述:

问题描述:view等标签上,存在多个class(一个固定,一个动态,如class="123" :class="[test ? 'show': 'hide']"),支付宝小程序报错。

VM232 index.html:3 Module build failed (from C:/snapshot/code-repo/out/target/bundle/node_modules/@ali/antcube-thread-loader/lib/cjs.js):  
Thread Loader (Worker 0)  
Expected "  
at (c:\Workspace\gitlab\efficient-wx\dist\dev\mp-alipay\pages\search\modules\Hots.axml:1:1322)  

at (c:\Workspace\gitlab\efficient-wx\dist\dev\mp-alipay\pages\search\modules\Hots.axml:1:1322)  
Module build failed (from C:/snapshot/code-repo/out/target/bundle/node_modules/@ali/antcube-thread-loader/lib/cjs.js):  
Thread Loader (Worker 1)  
Expected "  
at (c:\Workspace\gitlab\efficient-wx\dist\dev\mp-alipay\pages\search\modules\Hots.axml:1:1322)  

at (c:\Workspace\gitlab\efficient-wx\dist\dev\mp-alipay\pages\search\modules\Hots.axml:1:1322)
2022-12-09 13:09 负责人:无 分享
已邀请:
Anet

Anet

楼主,你好,能问一下你的项目用tailwindcss,运行到h5端时,mt-[20px]这种写法项目生效吗?

  • Lemon_Tree (作者)

    生效的,我是cli创建的项目

    2023-06-05 11:07

要回复问题请先登录注册