目录
问题背景
当创建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
,在vue.config.js
添加一行配置:lintOnSave: false
。