Vue2.0+webpack 引入字体文件(eot,ttf,woff)

webpack.base.config.js

需要配置

     {

        test:/\/(woff2?|eot|ttf|otf)(\?.*)?$/,
        
        loader: 'url-loader',
        
        options: {
        
        limit: 10000,
        
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        
        }
      }

如果 Vue2.0+webpack3.6引入字体文件(eot,ttf,woff)路径报错

These relative modules were not found:

* ../fonts/music-icon.eot?2qevqt in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./src/common/stylus/index.styl
* ../fonts/music-icon.svg?2qevqt in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./src/common/stylus/index.styl
* ../fonts/music-icon.ttf?2qevqt in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./src/common/stylus/index.styl
* ../fonts/music-icon.woff?2qevqt in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./src/common/stylus/index.styl

将font.css 路径修改为

 src: url('/static/fonts/music-icon.eot?2qevqt')
  src: url('/static/fonts/music-icon.eot?2qevqt#iefix') format('embedded-opentype'),
          url('/static/fonts/music-icon.ttf?2qevqt') format('truetype'),
          url('/static/fonts/music-icon.woff?2qevqt') format('woff'),
          url('/static/fonts/music-icon.svg?2qevqt#music-icon') format('svg')
相关推荐
Justinc.4 分钟前
CSS3新增边框属性(五)
前端·css·css3
fruge12 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia20 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫21 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
IT技术分享社区28 分钟前
C#实战:使用腾讯云识别服务轻松提取火车票信息
开发语言·c#·云计算·腾讯云·共识算法
极客代码31 分钟前
【Python TensorFlow】入门到精通
开发语言·人工智能·python·深度学习·tensorflow
疯一样的码农38 分钟前
Python 正则表达式(RegEx)
开发语言·python·正则表达式
光影少年40 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_41 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891143 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css