vite+vue3项目之自动引入ElMessage和ElMessageBox依然报错的问题

140 阅读1分钟

不想写一大堆的import,所以引用了unplugin-auto-importunplugin-vue-components两个插件。其他一切都好,但是遇到api式的组件调用时,就会报错。

image.png

网上有其他解决方案,多数是全局引用,挂载全局等。

其实有更简单的,只需要在.eslintrc-auto-import.json文件中加入相关API名,然后设置为true即可。

// .eslintrc-auto-import.json
{
  "globals": {
  ... 其他配置
    "ElMessage": true,
    "ElMessageBox": true
  }
}

.eslintrc-auto-import.jsonunplugin-auto-import生成的一个eslint全局文件。根据importsresolvers里的库提供的信息,自动化生成eslint过滤文件,使用这两个地方的组件不会报错。但是由于不知道说明原因,ElMessageElMessageBox无法自动生成。所以需要按上面步骤手动添加。

image.png