前端开发：项目引入vue-easytable时报错These relative modules were not...的解决方法
前端开发：项目引入vue-easytable时报错These relative modules were not...的解决方法
前言
前段时间在开发基于移动端的前端项目的时候，遇到一个使用table的需求，但是基于移动端的Vant框架的组件库里面没有table相关的组件支持，这就需要借助第三方组件来实现基于移动端的table功能。基于移动端的table的第三方组件有一个使用起来比较方便的组件：vue-easytable，该组件从集成到使用也都很简单，但是会遇到一个致命的问题，那就是本文所要分享的内容。
关于vue-easytable组件从集成到使用的方法，网上一大把教程，vue-easytable在git上面也有demo，可以自行搜索查阅，这里不再赘述。
报错原因
成功把vue-easytable集成到项目之后，在运行的时候遇到了一个报错，具体报错信息如下所示：
ERROR Failed to compile with 4 errors 上午9:54:42
These relative modules were not found:
* ./iconfont.eot?t=1607666235845 in ./node_modules/_css-loader@0.28.11@css-loader??ref--5-1!./node_modules/_postcss-loader@2.1.6@postcss-loader/lib??ref--5-2!./node_modules/_vue-easytable@2.5.5@vue-easytable/libs/theme-default/index.css
* ./iconfont.svg?t=1607666235845 in ./node_modules/_css-loader@0.28.11@css-loader??ref--5-1!./node_modules/_postcss-loader@2.1.6@postcss-loader/lib??ref--5-2!./node_modules/_vue-easytable@2.5.5@vue-easytable/libs/theme-default/index.css
* ./iconfont.ttf?t=1607666235845 in ./node_modules/_css-loader@0.28.11@css-loader??ref--5-1!./node_modules/_postcss-loader@2.1.6@postcss-loader/lib??ref--5-2!./node_modules/_vue-easytable@2.5.5@vue-easytable/libs/theme-default/index.css
* ./iconfont.woff?t=1607666235845 in ./node_modules/_css-loader@0.28.11@css-loader??ref--5-1!./node_modules/_postcss-loader@2.1.6@postcss-loader/lib??ref--5-2!./node_modules/_vue-easytable@2.5.5@vue-easytable/libs/theme-default/index.css
报错分析
根据上述报错提示信息，会有一个这样的疑问，为什么在集成vue-easytable组件的时候是按照正确的步骤操作的，运行的时候居然还是报错，提示not found呢？那是因为进入目录build里边的webpack.base.conf.js里边的配置文件提示loader是’url-loader’，如图所示：
但是node_modules的iconfont.css里边用的是‘url’，由于差异性造成的报错。
解决方法
直接把iconfont.css里边用的‘url’改成’url-loader’，即可解决上述报错问题，但是由于这是直接在node_modules里面修改，如下所示：
@font-face {font-family: "iconfont-vet";
src: url-loader('iconfont.eot?t=1607666235845'); /* IE9 */
src: url-loader('iconfont.eot?t=1607666235845#iefix') format('embedded-opentype'), /* IE6-IE8 */
url-loader('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAUAAAsAAAAACyAAAASxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDZgqHQIYVATYCJAMsCxgABCAFhR0HgT0bkglRVG8aZD8K48anlKkVETWZmxLicOmVmr/……/6xQAAAAA=') format('woff2'),
url-loader('iconfont.woff?t=1607666235845') format('woff'),
url-loader('iconfont.ttf?t=1607666235845') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url-loader('iconfont.svg?t=1607666235845#iconfont-vet') format('svg'); /* iOS 4.1- */
}
修改完成之后，保存文件，重新运行项目，不再报错，运行成功。
注意
如果是多人合作开发的话，这是一种治标不治本的方法，而且在打包发布的时候，如果是自动发布的，就会有致命性的问题，很可能会不显示table，显示的是空白。
最后
vue-easytable组件的集成以及使用过程很简单，但是要注意兼容性问题，以及上线之后可能会引起的问题，具体情况还是根据实际情况来决定，这里不再赘述。