Vue + Element 配置报错

Vue3 + Vite 项目实战:从报错到精通 Element Plus 图标库的完整配置指南 本文详细解析了Vue3 + Vite项目中配置Element Plus图标库的完整流程,从解决常见的`Failed to resolve import`报错到优化Vite配置,再到图标组件的正确使用方式。通过实战案例和深度配置指南,帮助开发者快速掌握Element Plus图标库的集成技巧,提升开发效率。 阅读详情

1.安装:

cnpm i element-ui -S


2.main .js 引入:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);



3.运行报错:

ERROR in ./node_modules/_element-ui@2.4.2@element-ui/lib/theme-chalk/fonts/element-icons.ttf
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/_css-loader@0.28.11@css-loader!./node_modules/_element-ui@2.4.2@element-ui/lib/theme-chalk/index.css 7:411-447
 @ ./node_modules/_element-ui@2.4.2@element-ui/lib/theme-chalk/index.css
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.2@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js


4.解决:在webpack.config.js里配置

{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  loader: 'file-loader'
}

原文: https://blog.youkuaiyun.com/weixin_41587194/article/details/80275281


vue3.0 结合element ui 开发后台ui框架 vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run serve 报错 提示缺少es2015包,安装这个包由于我先前已经安装过,这里卸载 :npm uninstall --global babel-cli 再执行安装操作:npm install b... 阅读详情

相关推荐

vue3使用Element-plus与TS(TypeScript)

如果你有一个困扰就是为什么直接CV Element plus文档里的代码总是报各种错误?!那你看这篇就对啦!(针对Vue3哦)

weixin_46019681的博客 9236

vue引入外部字体包报错(Source code omitted for this binary file)

vue项目引入外部字体包,然后报这个错,在网上搜,都是说使用webpack打包的时候才会出现这个错(原因是缺少loader) 解决方案:将字体包转换一下,转换地址为https://transfonter.org/ 然后下载下来 引入就OK了。 纯属做笔记 ...

Charis--Cai 5482

来自工业界的知识库 RAG 服务(二),RagFlow 源码全流程深度解析

前面介绍过有道 QAnything 源码解析,通过深入了解工业界的知识库 RAG 服务,得到了不少调优 RAG 服务的新想法。因此本次趁热打铁,额外花费一点时间,深入研究了另一个火热的开源 RAG 服务RagFlow的完整实现流程,希望同样有所收获。首先依旧可以先从框架图入手,与常规的 RAG 架构进行一些比较可以看到右侧知识库被明显放大,同时最右侧详细介绍了文件解析的各种手段,比如OCR等,这些在常规的 RAG 中可能会作为一个不起眼的。

易迟的专栏 2万+

Vue入门(12)webpack上

1.安装 npm i webpack@3.12.0 -D 2.编译打包生成build.js 看下目录结构 首先新建一个main.js. main.js是整个程序的入口文件。 main.js中 import Vue from "./vue.js" import App from './App.js' import { num1, num2, add} from "./App&q

缘灭_xy的博客 377

数字设计实验:自动售货机

本文旨在介绍数字设计实验:自动售货机的设计思路和实现代码

2401_83740084的博客 2227

双目视觉三维重构(一)————简介

优快云中关于立三维重构的介绍层出不穷,CNKI中也有各类综述对三维重构进行总结,撰写这篇博客仅作为本人对该类博客、论文的总结学习,加深自身学习的印象、作为学习的笔记。如有错误的地方,欢迎指正。   1、三维重构 1.1、三维重构到底是什么?   首先要了解立体匹配算法,首先要知道立体匹配算法主要具体应用于什么方向。 三维重构又被称为三维重建,百度百科中对它的定义为:指对三维物体建立适合...

qq_39634612的博客 1万+

ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf 1:0 Module parse failed:

在使用 webpack 搭建 vue 项目时,添加了element-ui 在启动 webpack-dev-server 后报错 ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, c

qq_42535651的博客 3104

CodeBuddy 接入 MCP,一键生成网站!

2024 年 11 月,Anthropic 公司搞了个挺有意思的新玩意 - Model Context Protocol(模型上下文协议)简称为 MCP 协议。简单来说,它就是给 AI 和各类工具数据之间搭了个标准化的”桥梁”,让开发者不用再为对接问题头疼了。mcp.so如下图所示,这是 mcp.so 网站中的 MCP Server。使用百度/高德地图分析旅线计算时间接 Puppeteer 自动操作网页使用 Github/Gitlab 让大模型接管代码仓库。

悟空聊架构的专栏 1942

ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf

vue项目应用element-ui后报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf 在对应的config.js内加入 module: { rules: [{ test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }] } 在次允许可能还会报错Module not

上官hao的博客 1308

KiCad自动布线实战:FreeRouting插件安装与使用指南

在PCB设计流程中,布线环节往往占据大量重复性工作,尤其对于中小型双面板,成百上千条飞线的手动连接既繁琐又易出错。自动布线技术通过算法在给定设计规则和元件布局的基础上自动规划走线路径,能显著提升布线效率。FreeRouting作为一款开源自动布线器,与KiCad通过DSN/SES标准中间格式无缝配合,让工程师将精力集中于关键信号和布局优化,而将常规网络交给工具处理。本文从自动布线的原理与边界出发,讲解了FreeRouting的安装、DSN导出、参数设置、自动布线及结果回传的完整流程,并结合实际案例展示了在S

weixin_32025789的博客 277

R语言绘图进阶:五大工具高效组合多图(cowplot、patchwork、layout、par、gridExtra)

本文详细介绍了R语言中五大高效组合多图的工具:cowplot、patchwork、layout、par和gridExtra。针对不同场景提供了实用指南,帮助数据分析师解决图表排版难题,提升报告专业度。特别推荐cowplot用于ggplot2图形组合,patchwork提供最简洁语法,layout则支持完全自定义布局。

weixin_42544663的博客 286

vue项目应用element-ui后报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf

加入这串就OK了 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' },

weixin_45932157的博客 1935

Vue3 - 实现用户上传本地视频文件到服务器+上传进度条+暂停续传+中断取消上传等,视频上传后可在线播放预览已上传的视频,视频文件上传视频回显示例代码(支持Element、Antd等upload组件

实现视频上传和视频预览,vue3实现视频上传功能,上传视频回显,视频流上传播放功能,vue与axios上传视频并显示上传进度,upload组件实现视频文件上传视频回显,upload组件实现视频上传及进度条展示,视频上传及实时进度条显示,视频上传过程中如何中断上传,VUE3+element 上传视频,大文件分片上传+断点续传,axios大文件切片上传,Vue3上传视频后如何播放预览,上传本地视频到后端服务器及在线预览播放视频+移除视频+进度条上传,将已选视频上传服务端并可预览视频,详细实现选择视频并上传到服务

🏆 前端领域优质创作者 3112

vue3配置Element,及element-plus/lib/theme-chalk/index.css报错处理

vue3配置Element,及element-plus/lib/theme-chalk/index.css报错处理 vue3在安装配置Element-UI时,需要安装的是Element-plus,注意区分一下 1、在vue3.x的项目项目安装Element-Plus npm i element-plus -S 2、引入到main.js,在\src\main.js中引入 import { createApp } from 'vue' import App from './App.vue' import ro

ajiejie66的博客 1万+

12-RK平台U-Boot启动流程

先看概述,把这一章要回答的问题摆出来,带着问题听。RK 特有的 BootROM -> MiniLoader -> SPL -> U-Boot -> Kernel。这是因为 RK 平台使用闭源的 DDR 初始化固件,需要通过 MiniLoader 来加载和运行。为什么多一层?这是 RK 平台的特殊性决定的。RK 平台使用闭源的 DDR 初始化固件,这段代码 Rockchip 不开源,只能以二进制形式提供,它需要一个载体来加载和运行,这个载体就是 MiniLoader。

内核笔记 1146

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

Vue2项目打包时,引入element-ui 配置 CDN 加速时报错 Cannot read properties of undefined (reading ‘prototype‘)

Vue2项目打包优化时,引入element-ui 配置 CDN 加速时报错出现报错信息:Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')此时再重新打包,控制台就没有报错了,试了下,项目也能正常运行。在 externals 下把 vue 也一起配了。老师说出现这个问题的原因是,

LHH1655758452的博客 3735

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

解决Failed to resolve import “@element-plus/icons-vue“ from “src\views\Home.vue“. Does the file exist?

成功地解决了Failed to resolve import "@element-plus/icons-vue" from "src\views\Home.vue". Does the file exist?

hu_666666的博客 2万+

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

vue照着官方文档安装配置好element之后项目报错的解决方法

做个记录 首先这是按官方要求修改后的 .babelrc 内容: { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 出现第一个报错 //解决上图报错 npm ins

weixin_43951592的博客 358

vue-element-admin 安装依赖 npm install 报错解决方案

前言(废话):   这段时间在研究 vue,试着 用 vue 写写 东西. 在网上找了一些 模板,如 vue-framework-wz , vue-iView-admin ,vue-element-admin等.稍微尝试了下 vue-framework-wz , 但是 npm install 各种报错 就果断放弃了,因为我找到了更好的 vue-element-admin 不但界面更好,而且 文...

胡萧徒的博客 4万+

正确git环境配置 vue-element-admin 模板搭建报错

npm install 9418 错误 使用 git config --global --edit 打开配置文件 更改成如下配置 在重新拉去vue-admin-template

bubblez的博客 1485

Vue3框架使用报错以及解决方案

1、TypeError: Failed to fetch dynamically imported module:引入组件时,没有添加.vue后缀 或者引入的组建没有被使用2、SyntaxError: The requested module '/node_modules/_schart.js@3.0.4@schart.j...

weixin_36378222的博客 364

vue3配置element-ui的使用

今天阐述一下如何在vue中进行配置使用element-ui;

Aftery的博客 1745

vue3+vite 按需自动引入element plus报错(按照官方方法配置失败:Failed to resolve import “element-plus“)

参考文章:https://www.cnblogs.com/cokolxvd/p/15661086.html 按需自动引入elementUI 首先需要插件 unplugin-vue-components 和 unplugin-auto-import npm i unplugin-vue-components unplugin-auto-import 根据elementUI plus 官网说明快速开始. 需要在vite.config.js中加入如下代码 复制代码 // vite.config.ts imp

sumisu666的博客 2万+

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

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

qq_41530545的博客 3893

vue使用element-ui时报错

在vue项目中引用element-ui时,按照文档操作,运行时依旧报错, 解决办法,在webpack.config.js文件找到如下位置添加配置 然后重启服务即可。

peppa_pig的博客 980
上一篇: Redis序列化实体类报错
下一篇: Ehcache 初体验
贤gg
博客等级 码龄10年 0粉丝 10原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值