x***@sina.com
x***@sina.com
  • 发布:2022-06-01 09:24
  • 更新:2022-07-03 18:47
  • 阅读:911

【报Bug】通过vue-cli创建的uniapp项目,无法正常在H5端使用uni-forms、uni-forms-item组件

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 21H2(64位)

浏览器平台: Chrome

浏览器版本: 102.0.5005.63(正式版本)(64 位)

项目创建方式: CLI

CLI版本号: 4.5.15

示例代码:
<uni-forms ref="valiForm" :rules="rules" :model-value="form" border>  
      <uni-forms-item label="账号" required name="username">  
        <uni-easyinput v-model="form.username" :input-border="false" placeholder="请输入账号" />  
      </uni-forms-item>  
      <uni-forms-item label="密码" required name="password">  
        <uni-easyinput v-model="form.password" :input-border="false" type="password" placeholder="请输入密码" />  
      </uni-forms-item>  
    </uni-forms>
export default {  
  name: "index",  
  data() {  
    return {  
      form: {  
        username: "",  
        password: ""  
      },  
      rules: {  
        username: {  
          rules: [  
            { required: true, errorMessage: "账号不能为空" }  
          ]  
        },  
        password: {  
          rules: [  
            { required: true, errorMessage: "密码不能为空" }  
          ]  
        }  
      },  
      submitLoading: false  
    }  
  }  
}

操作步骤:
<uni-forms ref="valiForm" :rules="rules" :model-value="form" border>  
      <uni-forms-item label="账号" required name="username">  
        <uni-easyinput v-model="form.username" :input-border="false" placeholder="请输入账号" />  
      </uni-forms-item>  
      <uni-forms-item label="密码" required name="password">  
        <uni-easyinput v-model="form.password" :input-border="false" type="password" placeholder="请输入密码" />  
      </uni-forms-item>  
    </uni-forms>
export default {  
  name: "index",  
  data() {  
    return {  
      form: {  
        username: "",  
        password: ""  
      },  
      rules: {  
        username: {  
          rules: [  
            { required: true, errorMessage: "账号不能为空" }  
          ]  
        },  
        password: {  
          rules: [  
            { required: true, errorMessage: "密码不能为空" }  
          ]  
        }  
      },  
      submitLoading: false  
    }  
  }  
}

预期结果:

正常显示

实际结果:

无法正常显示。并报错:
1、TypeError: Cannot set properties of undefined (setting 'default')
2、[Vue warn]: Failed to resolve async component

bug描述:

通过vue-cli创建的uniapp项目,选择默认模板。然后通过uni_modules 导入全部uni-ui组件(使用HBuilderX导入插件),然后在页面使用uni-forms以及uni-forms-item组件,在小程序端正常,发现无法正常在H5端运行。报错信息如下图:

2022-06-01 09:24 负责人:无 分享
已邀请:
silentdoer

silentdoer

我也是这个报错,有人遇到吗?

  • x***@sina.com (作者)

    使用npm构建,不要使用yarn

    2022-07-13 15:32

  • silentdoer

    回复 x***@sina.com: 就是用的npm,似乎写法里不要用require?

    2022-07-16 14:08

要回复问题请先登录注册