vue+webpack中配置elementui填坑总结

最新推荐文章于 2023-07-03 20:15:45 发布

世界是熊猫的！

最新推荐文章于 2023-07-03 20:15:45 发布

阅读量1.3k

点赞数

分类专栏：前端webpack vue 文章标签： vue.js webpack

本文链接：https://blog.youkuaiyun.com/sinat_36227086/article/details/108119864

版权

vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端webpack

10 篇文章

订阅专栏

本文总结了在Vue项目中结合Webpack配置ElementUI时遇到的问题及解决方法。首先通过`cnpm i element-ui -S`安装ElementUI，然后在main.js中引入，但在运行时会出现错误。为解决此问题，需要安装file-loader并在Webpack配置文件中添加相应的加载器规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：已经装好webpack和vue，并配置好vue所需loader等

1.安装elementui

cnpm i element-ui -S

2.在main.js中引入elementui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

此时运行后会报错

ERROR in ./node_modules/_element-ui@2.13.2@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, currently no loaders are configured to process 
this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/index.css (./node_modules/css-loader/dist/cjs.js!./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/index.css) 5:0-70 8:73-102
 @ ./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/index.css
 @ ./src/main.js

3.需要在webpack中安装fileloader并配置相应规则

命令：cnpm install --save-dev file-loader

规则：

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