【vue】：Module not found: Error: Can‘t resolve ‘element-ui/lib/theme-chalk/fonts/index.css‘ in ‘F:\elk

问题：

【vue】：Module not found: Error: Can't resolve 'element-ui/lib/theme-chalk/fonts/index.css' in 'F:\elk-components\packages\blindBox\src'

解决办法：

下面有几种解决办法，一个一个看下去，可能是其中某一个问题，依次排除

1.找不到依赖，路径问题

查看自己项目包的安装路径，看看是否是因为包更新后文件名产生了迭代，然后更新路径名称。如：

 

 就需要把：

import 'element-ui/lib/theme-default/index.css'

改为

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

2.看看vue以及element 版本

// 1. 利用命令查看版本
npm list vue
npm list element-ui
// 2. 直接在项目中package.json文件查看

我出错的版本 vue@2.6.14   element-ui@2.15.7 

试着更新版本

node.js安装：https://www.runoob.com/nodejs/nodejs-install-setup.html
node.js下载地址为：https://nodejs.org/en/download/
注意：Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ，不建议安装 Python 3.0 以上版本。
nodejs及npm升级到最新版本、指定版本
node有一个模块n，是专门用来管理node.js的版本的。
1、安装n模块：
npm install -g n
2、升级node.js到最新稳定版
n stable
3、安装指定版本：
n v6.11.5
#########################################################
npm 升级到最新版本
//
npm install -g npm
npm升级到指定版本
//比如升级到5.6.0
npm install -g npm@5.6.0
#########################################################
安装最新的vue
npm install -g vue-cli — 这个命令已经废弃了3.0以后
npm install -g @vue/cli
安装指定版本的vue
npm install -g @vue/cli@版本号
例如 ：
npm install -g @vue/cli@3.11.0
卸载vue
npm uninstall -g @vue/cli
#########################################################
vue项目element-ui升级到某版本
1.npm uninstall element-ui 卸载掉当前版本
2.npm install element-ui@2.3.9 -S 安装你想要的版本，
注意element-ui@2.3.9是一项，中间没有空格
3.最后在main.js中把default修改为theme-chalk
// import 'element-ui/lib/theme-default/index.css'
import 'element-ui/lib/theme-chalk/index.css'

3.webpack配置

正解：编译出了错，webpack改一下， webpack.config.js里的loaders，module->rules加上

{
    test: /\.(png|jpg|gif|svgeot|svg|ttf|woff|woff2)$/,
    loader: "file-loader",
},

在这里哦：

 当然了，如果你已经有这个json了，只是文件类型不太全，加上文件类型就行了。

那既然说到文件类型这个问题，如果下次再出现这个问题，我们只需要把错误提示里的文件类型像前面说的一样加进去就可以了，学聪明点，举一反三。

然后关闭重新运行。（一定要注意关闭重新运行哦）

原因是：这种情况发生是因为模块解析失败,缺少.ttf格式解析模块,vue2.0以上。

有时候安装的是 url-loader ，那我们就需要安装url-loader了

贴心的放上代码

// 安装url-loader
npm install url-loader/cnpm install url-loader -D
// 安装file-loader
npm install file-loader/cnpm install file-loader -D

4.总结

• 官网更新后，路径问题
• 版本号问题
• webpack的文件类型问题（记得重启）

ok，完美，lucky