文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3+Element-plus项目自动导入报错如何解决

2023-07-06 12:08

关注

这篇“Vue3+Element-plus项目自动导入报错如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue3+Element-plus项目自动导入报错如何解决”文章吧。

前言

在创建 Vue3 + Element-plus 项目时,根据 Element-plus 文档,采用自动导入,安装 unplugin-vue-components 和 unplugin-auto-import 两款插件,但在按要求配置后运行项目,npm 报错

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

网上查找发现当前(20220601)并无相关解决方案,经排查发现错误是由 unplugin-auto-import 插件的依赖 unimport 包引发,查看解决方法可直接跳转至“解决方案”

安装步骤

1.安装插件
npm install -D unplugin-vue-componentsnpm install -D unplugin-auto-import

两个插件使用一条命令一起安装可能出错

2.vue.config.js 设置
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 出错

Vue3+Element-plus项目自动导入报错如何解决

解决方案

1.问题原因

以下问题解决其一即可:

1.1 unimport 包报错

查找 unplugin-auto-import 插件的依赖 unimport 包,node_modules\unimport\dist\chunks\vue-template.cjs:55 位置的语句报错:

const name = i.as ?? i.name;
1.2 node.js 和 npm 版本过低

笔者出现此问题时,node.js 版本为 v12.18.0,npm 版本为 6.14.5

2.解决方法

降低 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 版本升级至长期维护版,20220601时为 v16.15.0,升级方法:从 node.js官网 下载长期维护版,安装位置选择与当前 node.js 位置相同即可

将 npm 版本升级为与 node.js 版本匹配的推荐版本,20220601时为 8.10.0,升级方法:

npm install -g npm@8.10.0

补充:element-plus自动按需导入及出错解决

自动按需导入官网教程

首先: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,但是如果安装版本过高可能在配置时会报错,所以安装指定版本

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

按照官网自动按需导入element-plus出现以下问题:样式不生效

将安装版本更换为npm i element-plus@1.0.2-beta.28

以上就是关于“Vue3+Element-plus项目自动导入报错如何解决”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯