您好,登录后才能下订单哦!
本篇内容介绍了“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 包引发,查看解决方法可直接跳转至“解决方案”
npm install -D unplugin-vue-components npm install -D unplugin-auto-import
两个插件使用一条命令一起安装可能出错
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()], }), ], }, )}
以下问题解决其一即可:
查找 unplugin-auto-import 插件的依赖 unimport 包,node_modules\unimport\dist\chunks\vue-template.cjs:55 位置的语句报错:
const name = i.as ?? i.name;
笔者出现此问题时,node.js 版本为 v12.18.0,npm 版本为 6.14.5
降低 unplugin-auto-import 插件版本或升级 node.js 和 npm 版本,选择其一即可:
更换 unplugin-auto-import 插件版本,经验证,安装 unplugin-auto-import@0.72 及以前版本可规避此问题
npm install -D unplugin-auto-import@0.7.2
将 node.js 版本升级至长期维护版,20220601时为 v16.15.0,升级方法:从 node.js官网 下载长期维护版,安装位置选择与当前 node.js 位置相同即可
将 npm 版本升级为与 node.js 版本匹配的推荐版本,20220601时为 8.10.0,升级方法:
npm install -g npm@8.10.0
自动按需导入官网教程
首先: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.28 1 module.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项目自动导入报错怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。