uni-app 通过vue-cli创建的项目在H5端无法正常使用uni-forms、uni-forms-item组件

产品分类：

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  
    }  
  }  
}

预期结果：

正常显示

实际结果：

无法正常显示。并报错：

TypeError: Cannot set properties of undefined (setting ‘default’)
[Vue warn]: Failed to resolve async component

bug描述：

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

wuwangju 1楼•1 个月前作者

我也是这个报错，有人遇到吗？

wuwangju 2楼•1 个月前作者

使用npm构建，不要使用yarn

wuwangju 3楼•1 个月前作者

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

yibo5220 4楼•1 个月前

在 uni-app 中，通过 vue-cli 创建的项目在 H5 端无法正常使用 uni-forms 和 uni-forms-item 组件，可能是由于以下几个原因导致的：

1. 组件未正确引入或注册

确保你已经正确引入了 uni-forms 和 uni-forms-item 组件，并且在页面或组件中进行了注册。

import uniForms from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-forms/uni-forms.vue'
import uniFormsItem from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-forms-item/uni-forms-item.vue'

export default {
  components: {
    uniForms,
    uniFormsItem
  }
}

2. 组件库未正确安装

确保你已经安装了 [@dcloudio](/user/dcloudio)/uni-ui 组件库。如果没有安装，可以通过以下命令进行安装：

npm install [@dcloudio](/user/dcloudio)/uni-ui --save

3. H5 端兼容性问题

uni-forms 和 uni-forms-item 组件在 H5 端可能存在兼容性问题。你可以尝试以下方法来解决：

3.1 使用 `v-if` 判断平台

你可以在使用 uni-forms 和 uni-forms-item 组件时，通过 v-if 判断当前平台是否为 H5，如果是 H5 端，则使用其他替代方案。

<template>
  <div>
    <uni-forms v-if="!isH5">
      <uni-forms-item label="用户名">
        <input v-model="username" />
      </uni-forms-item>
    </uni-forms>
    <form v-else>
      <label>用户名</label>
      <input v-model="username" />
    </form>
  </div>
</template>

<script>
export default {
  computed: {
    isH5() {
      return process.env.VUE_APP_PLATFORM === 'h5'
    }
  }
}
</script>

3.2 使用 `uni-app` 提供的 `uni-composite` 组件

uni-composite 是 uni-app 提供的一个跨平台组件库，可以在 H5 端和微信小程序等平台上使用。你可以尝试使用 uni-composite 中的表单组件。

<template>
  <uni-composite>
    <uni-form>
      <uni-form-item label="用户名">
        <input v-model="username" />
      </uni-form-item>
    </uni-form>
  </uni-composite>
</template>

<script>
import { UniComposite, UniForm, UniFormItem } from 'uni-composite'

export default {
  components: {
    UniComposite,
    UniForm,
    UniFormItem
  }
}
</script>

4. 检查 `vue-cli` 配置

确保你的 vue-cli 配置正确，特别是 vue.config.js 中的配置。你可以检查是否有任何配置影响了 uni-forms 和 uni-forms-item 组件的正常使用。

5. 更新 `uni-app` 和 `uni-ui` 版本

确保你使用的 uni-app 和 uni-ui 是最新版本，旧版本可能存在一些已知的 bug 或兼容性问题。

npm update [@dcloudio](/user/dcloudio)/uni-app [@dcloudio](/user/dcloudio)/uni-ui

6. 检查控制台错误信息

打开浏览器的开发者工具，检查控制台是否有任何错误信息。根据错误信息进行排查和修复。

7. 使用 `uni-app` 官方示例

你可以参考 uni-app 官方提供的示例代码，确保你的代码与官方示例一致。

<template>
  <uni-forms>
    <uni-forms-item label="用户名">
      <input v-model="username" />
    </uni-forms-item>
  </uni-forms>
</template>

<script>
import uniForms from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-forms/uni-forms.vue'
import uniFormsItem from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-forms-item/uni-forms-item.vue'

export default {
  components: {
    uniForms,
    uniFormsItem
  }
}
</script>