前言

在創(chuàng)建 Vue3 + Element-plus 項(xiàng)目時(shí)，根據(jù) Element-plus 文檔，采用自動(dòng)導(dǎo)入，安裝 unplugin-vue-components 和 unplugin-auto-import 兩款插件，但在按要求配置后運(yùn)行項(xiàng)目，npm 報(bào)錯(cuò)

 ERROR  SyntaxError: Unexpected token '?'
...\node_modules\unimport\dist\chunks\vue-template.cjs:55
    const name = i.as ?? i.name;

網(wǎng)上查找發(fā)現(xiàn)當(dāng)前（20220601）并無相關(guān)解決方案，經(jīng)排查發(fā)現(xiàn)錯(cuò)誤是由 unplugin-auto-import 插件的依賴 unimport 包引發(fā)，查看解決方法可直接跳轉(zhuǎn)至“解決方案”

安裝步驟

1.安裝插件

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

兩個(gè)插件使用一條命令一起安裝可能出錯(cuò)

2.vue.config.js 設(shè)置

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 run serve 出錯(cuò)

解決方案

1.問題原因 

以下問題解決其一即可：

1.1 unimport 包報(bào)錯(cuò)

查找 unplugin-auto-import 插件的依賴 unimport 包，node_modules\unimport\dist\chunks\vue-template.cjs:55 位置的語句報(bào)錯(cuò)：

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

1.2 node.js 和 npm 版本過低

筆者出現(xiàn)此問題時(shí)，node.js 版本為 v12.18.0，npm 版本為 6.14.5

2.解決方法

降低 unplugin-auto-import 插件版本或升級(jí) node.js 和 npm 版本，選擇其一即可：

2.1 降低 unplugin-auto-import 插件版本

更換 unplugin-auto-import 插件版本，經(jīng)驗(yàn)證，安裝 unplugin-auto-import@0.72 及以前版本可規(guī)避此問題

npm install -D unplugin-auto-import@0.7.2

2.2 升級(jí) node.js 和 npm 版本

將 node.js 版本升級(jí)至長期維護(hù)版，20220601時(shí)為 v16.15.0，升級(jí)方法：從 node.js官網(wǎng) 下載長期維護(hù)版，安裝位置選擇與當(dāng)前 node.js 位置相同即可

將 npm 版本升級(jí)為與 node.js 版本匹配的推薦版本，20220601時(shí)為 8.10.0，升級(jí)方法：

npm install -g npm@8.10.0

補(bǔ)充：element-plus自動(dòng)按需導(dǎo)入及出錯(cuò)解決

自動(dòng)按需導(dǎo)入官網(wǎng)教程

首先：npm install -D unplugin-vue-components unplugin-auto-import

然后配置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()],
    }),
  ],
}

也可以直接配置babel.config.js，但是如果安裝版本過高可能在配置時(shí)會(huì)報(bào)錯(cuò)，所以安裝指定版本

npm i element-plus@1.0.2-beta.28
1
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ],
}

按照官網(wǎng)自動(dòng)按需導(dǎo)入element-plus出現(xiàn)以下問題：樣式不生效

將安裝版本更換為npm i element-plus@1.0.2-beta.28

總結(jié)

到此這篇關(guān)于Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)解決的文章就介紹到這了,更多相關(guān)Vue3 Element-plus自動(dòng)導(dǎo)入報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！