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#🎜🎜 #

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()],
      }),
    ],
  },
)}

Nach dem Login kopieren

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;

Nach dem Login kopieren

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

npm install -D unplugin-auto-import@0.7.2

npm install -g npm@8.10.0

Nach dem Login kopieren

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()],
    }),
  ],
}

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!