报错信息如下:
Uncaught Error: Cannot find module '../fonts/sell-icon.eot?k5xf13' at webpackMissingModule (index.scss?9c8b:7) at eval (index.scss?9c8b:7) at Object../node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/common/scss/index.scss (app.js:4837) at webpack_require (app.js:724) at fn (app.js:101) at eval (index.scss?ab6e:4) at Object../src/common/scss/index.scss (app.js:10066) at webpack_require (app.js:724) at fn (app.js:101) at eval (main.js:13)
网上查了下,原来 woff2、eot、ttf、otf,在webpack中配置的是url-loader,然而在icon-font.scss中却写的是url,只要都改成url-loader就可以了。
@font-face {
font-family: 'sell-icon';
src: url-loader('../fonts/sell-icon.eot?k5xf13');
src: url-loader('../fonts/sell-icon.eot?k5xf13#iefix') format('embedded-opentype'),
url-loader('../fonts/sell-icon.ttf?k5xf13') format('truetype'),
url-loader('../fonts/sell-icon.woff?k5xf13') format('woff'),
url-loader('../fonts/sell-icon.svg?k5xf13#sell-icon') format('svg');
font-weight: normal;
font-style: normal;
}
Tips:vue-cli3 对webpack进行了处理,它不会把配置文件暴露出来,你可以通过 vue inspect > output.js 将配置信息输出到一个文件进行查看,但要修改其中配置需要在vue.config.js中修改覆盖默认设置