Beheben Sie den Fehler beim Ausführen des Vue-Projekts: Die Komponente „xxxxxx“ wurde registriert, aber nicht verwendet vueno-unused-components

Inhaltsverzeichnis

Problemhintergrund

Fehlermeldung

Ursachenanalyse

Lösung

---

Problemhintergrund

Wenn ein Vue2.0- oder 3.0-Projekt ausgewählt ist und  eslint definierte, aber nicht verwendete Komponenten oder definierte, aber nicht verwendete Variablen vorhanden sind, wird ein Fehler gemeldet. .

Fehlermeldung

Wenn npm run server das Vue-Projekt ausführt, tritt ein Fehler auf: Die „HelloWorld“-Komponente wurde registriert, aber nicht verwendet, vueno-unused-components

Ursachenanalyse

Das heißt,  eslint die Standardregeln führen zu unnötigen Fehlerberichten. Das heißt, dieser Fehler wird gemeldet, weil der Eslint-Code prüft, ob Sie die Komponente registriert, aber nicht verwendet haben, und dann einen Fehler gemeldet hat

Lösung

Methode 1: Ändern Sie  eslintdie Regeln

◼️ Ändern Sie das Vue-Projektpackage.json 

package.json Suchen Sie die Regeln unter eslintConfig in und fügen Sie den folgenden Code hinzu :

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

◼️ Ändern Sie das Vue-Projekt eslintrc.js

Suchen Sie in eslintrc.js der Datei (falls diese Datei im Projekt vorhanden ist) die Regeln im js-Modul und fügen Sie den folgenden Code hinzu:

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

Es kann jeder dieser beiden Dateitypen verwendet werden. Wenn beide Dateien geändert werden, eslintrc.js ist die Priorität der Datei höher.

Methode 2: Nicht verwenden oder schließen eslint 

• Option 1: Nicht verwenden eslint . Natürlich können Sie es beim Erstellen eines Projekts nicht auswählen  , aber es wird offensichtlich eingeführt, wenn Sie auf ein solches Problem stoßen  . . eslinteslint 

• Lösung 2: Schließen Sie  eslint und  vue.config.js fügen Sie eine Konfigurationszeile hinzu:  lintOnSave: false .

Referenzen:  Nachdem Vue ein Projekt erstellt hat, gibt es keine Dateilösung webpack.config.js (vue.config.js).