vue プロジェクト実行時のエラーを解決します: 「xxxxxx」コンポーネントは登録されていますが、使用されていません vueno-unused-components

目次

問題の背景

エラーメッセージ

原因分析

解決

---

問題の背景

Vue2.0 または 3.0 プロジェクトを選択した場合 eslint 、定義済みで未使用のコンポーネントがある場合、または定義済みで未使用の変数がある場合、エラーが報告されます。。

エラーメッセージ

npm runserve が vue プロジェクトを実行すると、エラーが発生します: 「HelloWorld」コンポーネントは登録されていますが、使用されていません vueno-unused-components

原因分析

つまり、 eslint デフォルトのルールでは不要なエラー報告が発生します。つまり、このエラーは、eslint コードがコンポーネントを登録したが使用していないことをチェックし、その後エラーを報告するために報告されます。

解決

方法 1: eslintルールを変更する

◼️ vue プロジェクトを変更するpackage.json 

package.json の eslintConfig の下にあるルールを見つけて、次のコードを追加します。

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

◼️ vue プロジェクトを変更する eslintrc.js

ファイル内でeslintrc.js (このファイルがプロジェクトに存在する場合)、js モジュール内のルールを見つけて、次のコードを追加します。

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

これら 2 種類のファイルはどちらでも使用できますが、両方のファイルが変更された場合、eslintrc.js ファイルの優先度が高くなります。

方法 2: 使用しない、または閉じない eslint 

• オプション 1: 使用しないeslint もちろん、プロジェクトの作成時に選択することはできません が、この種の問題が発生した場合に明らかに導入されます 。。 eslinteslint 

• 解決策 2: を閉じて eslint 、 vue.config.js 設定の行を追加します lintOnSave: false 。

参考:  Vue がプロジェクトを作成した後、webpack.config.js (vue.config.js) ファイルの解決策が存在しない