【vue使用问题集锦】elemen-ui 引入失败的问题

ERROR in ./~/element-ui/lib/theme-chalk/fonts/element-icons.ttf
Module build failed: Error: emitFile is required from module system
at Object.module.exports (D:\code\github\learningfe\node_modules\file-loader\index.js:9:27)
at Object.loader (D:\code\github\learningfe\node_modules\url-loader\dist\index.js:76:19)
@ ./~/css-loader!./~/element-ui/lib/theme-chalk/index.css 6:879-915

当我们在第一次使用 element-ui 的时候,我们按照官网的一些步骤去操作,但是我们还是可能遇到以上的问题

原因是什么呢?

原因是 style-loader 没有被正确安装

修复bug的解决方案

第一步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
}, {
test: /\.json$/,
loader: 'json'
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[ext]')
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}, {
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}]
},

在 webpack配置文件中 webpack.base.conf.js 新增 laoder 配置

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

第二步

安装 style-loader

npm install style-loader –save

或者其他安装的方式,均可

重新启动app吧

Done

坚持原创技术分享,您的支持将鼓励我继续创作!