Vue3+Element-plus項目自動導(dǎo)入報錯的解決方案

3403771864 發(fā)布于2022-09-21 06:30 / 2676人閱讀

　　在項目中遇見很多問題，報錯是其中常見問題之一，例如在創(chuàng)建 Vue3 + Element-plus 項目中安裝插件，在按照要求配置后運(yùn)行項目，npm 報錯，究竟是怎么回事那？

我們在采用自動導(dǎo)入，Element-plus 文檔后，安裝 unplugin-vue-components 和 unplugin-auto-import 兩款插件，之后就運(yùn)行項目，結(jié)果出現(xiàn)npm 報錯

　　ERROR SyntaxError: Unexpected token '?'

　　...\node_modules\unimport\dist\chunks\vue-template.cjs:55

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

　　在百度檢索緣由發(fā)現(xiàn)并沒有相關(guān)內(nèi)容，之后只有我們自己逐一排查，找到出現(xiàn)報錯是因為是unplugin-auto-import 插件的依賴 unimport 包引發(fā)，現(xiàn)在一起看看解決方法：

　　安裝步驟

　　1.安裝插件

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

　　兩個插件使用一條命令一起安裝可能出錯

　　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 出錯

　　解決方案

　　1.問題原因

　　以下問題解決其一即可：

　　1.1unimport 包報錯

　　知道是由于unplugin-auto-import 插件太過于依賴unimport 包造成，node_modules\unimport\dist\chunks\vue-template.cjs:55 位置的語句報錯：

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

　　1.2 node.js 和 npm 版本過低

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

　　2.解決方法

　　常規(guī)就是選擇要么降低unplugin-auto-import 插件版本，要么級node.js 和 npm 版本，兩者之一：

　　2.1 降低unplugin-auto-import 插件解決方法

　　要將unplugin-auto-import 插件版卸載，安裝 unplugin-auto-import@0.72 及以前版本就可以解決這個問題

　　npm install -D unplugin-auto-import@0.7.2

　　2.2 升級node.js 和 npm 版本

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

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

　　npm install -g npm@8.10.0

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

　　自動按需導(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()],
　　}),
　　],
　　}

　　當(dāng)我們選擇直接配置babel.config.js時，就要考慮安裝版本過高可能在配置時會報錯，因此要制定安裝版本

　　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`
　　}
　　}
　　]
　　],
　　}

　要是自動安裝導(dǎo)入element-plus就會導(dǎo)致有這樣問題：樣式不生效

　　解決方法就是將安裝版本更換為npm i element-plus@1.0.2-beta.28。

　　至此，Vue3+Element-plus項目自動導(dǎo)入報錯解決方案內(nèi)容已講述完畢，歡迎大家后續(xù)更多關(guān)注相關(guān)精彩內(nèi)容。