Vue3+Element-plus项目自动导入报错的解决方案

网友投稿 • 2022年10月6日 am9:17 • 云知识 • 阅读 0

　　在项目中遇见很多问题，报错是其中常见问题之一，例如在创建 Vue3 + Element-plus 项目中安装插件，在按照要求配置后运行项目，npm 报错，究竟是怎么回事那？

我们在采用自动导入，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;

　　在百度检索缘由发现并没有相关内容，之后只有我们自己逐一排查，找到出现报错是因为是unplugin-auto-import 插件的依赖 unimport 包引发，现在一起看看解决方法：

　　安装步骤

　　1.安装插件

　　npm install -D unplugin-vue-components
　　npm 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 出错

　　解决方案

　　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 版本过低

　　笔者出现此问题时，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.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项目自动导入报错解决方案内容已讲述完毕，欢迎大家后续更多关注相关精彩内容。

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/3963.html

Vue3+Element-plus项目自动导入报错的解决方案

相关推荐

发表评论