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

news2024/11/17 5:55:30

 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')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/906402.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

成都爱尔林江院长解析离焦眼镜为何与众不同

近视是影响我国国民尤其是青少年眼健康的重大公共卫生问题。因病因不明确,且尚无有效的治疗方法,如何有效控制近视发生和增长备受关注。国家出台了儿童近视防控方案,社会上也出现了各种近视防控方法及策略。周边离焦技术,算得上近…

快速上手Linux核心命令:Linux的文本编辑器vi和vim

前言 上一篇中已经预告,我们这篇主要说Linux中vi/vim 编辑器。它是我们使用Linux系统不可缺少的工具,学会了,你就可以在Linux世界里畅通无阻,学废了,常用操作你也会了,也是够用了,O(∩_∩)O 简…

javascript初学者可以做些什么小东西或者项目来练手?

前言 可以试一下面的一些项目,可能有一些比较复杂,可以学习一下代码的结构思路,希望对你有帮助~ 实用工具向 1.Exchart Star:55.6k Exchart提供了大量精美的图表,只有你想不到,没有你在它上面找不到的&…

了解 JSON 格式

一、JSON 基础 JSON(JavaScript Object Notation,JavaScript 对象表示法)是一种轻量级的数据交换格式,JSON 的设计目的是使得数据的存储和交换变得简单。 JSON 易于人的阅读和书写,同时也易于机器的解析和生成。尽管 J…

8月17日上课内容 LVS+Keepalived群集

本章结构 Keepalived概述 keepalived工作原理 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案,可以解决静态路由出现的单点故障问题 在一个LVS服务集群中通常有主服务器 (MASTER)和备份服务器(BACKUP)两种角色的服务器,但是对外表现为一个虚拟…

为什么选择elasticsearch分布式搜索引擎

文章目录 🔭什么是elasticsearch🌠ELK技术栈🌠elasticsearch和lucene🌠为什么不是其他搜索技术? 🔭总结 🔭什么是elasticsearch elasticsearch是一款非常强大的开源搜索引擎,具备非常…

mini木马实践和防护方法

一、实验目的: 1.了解木马的实现原理 2.了解基本的防护方法 二、预备知识: 木马通常有两个可执行程序:一个是客户端,即控制端;另一个是服务端,即被控制端。植入被种者电脑的是“服务器”部分,而…

linux如何使用keepalived配置VIP

VIP常用于负载均衡的高可用,使用VIP可以给多个主机绑定一个IP,这样,当某个负载应用挂了之后,可以自动切到另一个负载。 我这里是在k8s环境中做的测试,集群中有6个节点,我给140和141两个节点配置VIP。 1. 安…

「2024」预备研究生mem-立体几何截面模型代绝对值得一次和二次函数

一、立体几何截面模型&代绝对值得一次和二次函数 二、练习题 凑配换元

Mysql5.7.36主从同步实操

主库创建同步账户 #创建备份的账户 CREATE USER backup192.168.32.1 IDENTIFIED BY backup123; #给账户授予备份的权限 GRANT REPLICATION SLAVE ON *.* TO backup192.168.32.1; #刷新权限 FLUSH PRIVILEGES;停止主库 配置主库需要的备份参数 打开my.ini文件,配置…

Unity C# 之 Task、async和 await 、Thread 基础使用的Task的简单整理

Unity C# 之 Task、async和 await 、Thread 基础使用的Task的简单整理 目录 Unity C# 之 Task、async和 await 、Thread 基础使用的Task的简单整理 一、Task、async和 await 、Thread 基础概念 1、线程,多线程 2、Task 3、async (await )…

第四章:树形结构的关联式容器(map+set)

系列文章目录 文章目录 系列文章目录前言1、关联式容器与序列式容器1.1 键值对 2、set的介绍3、multiset的介绍3.1 接口count与容器multiset 4、map的介绍4.1 接口insert4.2 operator[]和at 5、multimap的介绍 前言 根据应用场景的不桶,STL总共实现了两种不同结构的…

PBI 之 Query数据导入、处理

PBI梳理数据流程 首先通过Excel 插件 Power Query、Power Pivot处理数据,然后使用Power Desktop导入处理好的数据进行展示。最后发布到在线网站。 一、导入数据 二、处理数据 如下,进入到Power Query编辑器界面 数据--查询&连接 界面区 界面区右键…

ChatGPT产品发布时间表-了解别人家的创业节奏

ChatGPT产品节点-2023年7月末-长期更新 ChatGPT风靡全球,创造了科技史上的发展奇迹。它可以根据简短的提示生成文章、代码等,极大地提高了生产力。许多大品牌正在尝试利用它来生成广告和营销文字。OpenAI也在此技术上大举投资。以下是ChatGPT产品发布时间…

共创无线物联网数字化新模式|协创数据×企企通采购与供应链管理平台项目成功上线

近日,全球无线物联网领先者『协创数据技术股份有限公司』(以下简称“协创数据”)SRM采购与供应链项目全面上线,并于近日与企企通召开成功召开项目上线总结会。 基于双方资源和优势,共同打造了物联网特色的数字化采购供…

运动耳机哪款好用、适合运动的耳机推荐

如今,蓝牙耳机不仅是手机的最佳伴侣,也成为了运动爱好者的必备装备。但是,在如此众多的蓝牙耳机中,你是否对选购感到困惑呢?实际上,选择适合运动的蓝牙耳机需要考虑许多因素,如舒适度、稳固性、…

STM32L151C8T6 芯片数据手册

1. 芯片型号含义 2. Flash: 64KB 3. keil 配置ST-Link 烧录程序 4. keil 选择Flash 烧录算法 5. 系统主频 32Mhz 6. 时钟树 clock tree

2009年下半年 软件设计师 上午试卷3

博主介绍:✌全网粉丝3W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…

数字化赋能高质量施工,成企业创新转型新方向

建筑行业是一个需要投入大量资金、能源消耗大、风险高且劳动力密集的行业,传统施工管理方式存在着“无法实时控制进度、无法实时控制质量、材料浪费、常需返工、安全事件频发”等问题。 为了自身的转型升级,也为了响应国家战略规划落地对建筑行业提出的要…

java 微信小程序授权获取用户手机号码 (完整demo)

1. 前端获取动态令牌 code https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html 2. 后端接收令牌code, 调用微信获取手机号接口 POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_tokenACCESS_TOKEN 3. con…