解决运行vue项目报错：The “xxxxxx” component has been registered but not used vueno-unused-components

目录

问题背景

报错信息

原因分析

解决方法

---

问题背景

当创建Vue2.0或是3.0项目时选择了 eslint ，那么当存在定义而未使用的组件，或存在定义而未使用的变量时，会报错。。

报错信息

npm run serve运行vue项目时出现报错：The “HelloWorld” component has been registered but not used vueno-unused-components

原因分析

即 eslint 默认规则导致了不必要的报错，也就是说报这个错误是因为eslint代码检查到你注册了组件但没有使用，然后就报错了

解决方法

方法一：修改 eslint规则

◼️ 修改vue项目的package.json 

在package.json 中找到eslintConfig下的rules，添加以下代码即可：

"eslintConfig": {
  "rules": {
      "vue/no-unused-components": "off", // 当存在定义而未使用的组件时，关闭报错
      "no-unused-vars":"off" // 当存在定义而未使用的变量时，关闭报错
   }
}

◼️ 修改vue项目的 eslintrc.js

在eslintrc.js 文件中(如果项目中存在此文件的话)，在该js模块中找到rules，添加以下代码即可：

rules: {
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  "vue/no-unused-components": "off"
  "vue/no-unused-components": "off"
}

这两种使用其中任意一种都可以，如果两个文件都修改了的话，eslintrc.js 文件的优先级较高。

方法二：不使用或关闭 eslint 

• 方案一：不使用eslint ，当然，可以在创建项目时不选择 eslint ，可是一般遇到这种问题的，显然是引入了 eslint 。。

• 方案二：关闭 eslint ，在 vue.config.js 添加一行配置： lintOnSave: false 。

参考资料： Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决