So beheben Sie den automatischen Importfehler des Vue3+Element-plus-Projekts

Vorwort

Verwenden Sie beim Erstellen eines Vue3 + Element-Plus-Projekts den automatischen Import und die Installation gemäß Element-Plus Dokumentation Es gibt zwei Plug-ins, unplugin-vue-components und unplugin-auto-import, aber nachdem das Projekt ausgeführt und nach Bedarf konfiguriert wurde, meldet npm einen Fehler

ERROR SyntaxError: Unerwartetes Token '?'
...node_modulesunimportdistchunksvue-template.cjs:55
const name = i.as ?? i.name;

Online suchen und festgestellt, dass es derzeit keine relevante Lösung gibt (20220601). Nach der Untersuchung wurde festgestellt, dass der Fehler durch die Abhängigkeit des Unplugin-Auto-Import-Plug-Ins vom Uniimport-Paket verursacht wurde. Um die Lösung anzuzeigen, können Sie direkt zu „Lösung“ springen "

Installationsschritte

1 .Plug-ins installieren

npm install -D unplugin-vue-components
npm install -D unplugin-auto-import

Die Verwendung eines Befehls zum gleichzeitigen Installieren von zwei Plug-ins kann zu Fehlern führen#🎜🎜 #

2.vue.config.js-Einstellungen

const { defineConfig } = require('@vue/cli-service')
 
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
)}

3.npm-Ausführungsfehler

Lösung# 🎜🎜#

1. Ursache des Problems

Lösen Sie eines der folgenden Probleme:

1.1 Fehler beim Deimportieren des Pakets

Suchen Sie das Abhängigkeits-Uniimport-Paket des Unplugin-Auto-Import-Plug-Ins, node_modulesunimportdistchunksvue-template.cjs:55-Anweisungsfehlerbericht: #🎜🎜 #

const name = i.as ?? i.name;

1.2 Die Versionen von node.js und npm sind zu niedrig

# 🎜🎜#Als der Autor dieses Problem hatte, war die node.js-Version v12.18.0 und die npm-Version 6.14.5

#🎜 🎜#2. Lösung

Reduzieren Sie die Unplug-In-Version. Plug-In-Version automatisch importieren oder die Versionen von node.js und npm aktualisieren, wählen Sie eine aus:

2.1 Unplugin-Auto-Import-Plug-In-Version reduzieren

Ersetzen Sie das Unplugin -auto-import Plug-in-Version. Es wurde bestätigt, dass die Installation von unplugin-auto-import@0.72 und früheren Versionen dieses Problem vermeiden kann

npm install -D unplugin-auto-import@0.7.2

2.2 Upgrade von node.js und npm-Version

Aktualisieren Sie die Version von node.js auf die Langzeitwartungsversion, die 20220601 v16.15.0 ist. Upgrade-Methode: Laden Sie die Langzeitwartungsversion von der offiziellen Website von node.js herunter Derselbe wie der aktuelle. Der Speicherort von node.js ist derselbe.

Aktualisieren Sie die npm-Version, die der node.js-Version entspricht. Upgrade-Methode :

npm install -g npm@8.10.0

Supplement:element-plus importiert automatisch bei Bedarf und behebt Fehler

Automatischer Import bei Bedarf, offizielles Website-Tutorial

Zuerst: #🎜🎜 #

Dann konfigurieren Sie webpack .config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

Sie können babel.config.js auch direkt konfigurieren, aber wenn die installierte Version zu hoch ist, wird möglicherweise ein Fehler gemeldet Installieren Sie während der Konfiguration die angegebene Version installierte Version mit npm i element-plus@1.0.2-beta.28

Das obige ist der detaillierte Inhalt vonSo beheben Sie den automatischen Importfehler des Vue3+Element-plus-Projekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!