vue项目webpack打包后字体失效

最新推荐文章于 2024-05-16 11:16:26 发布

原创最新推荐文章于 2024-05-16 11:16:26 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

技术专栏收录该内容

14 篇文章

订阅专栏

本文探讨了在打包过程中汉字字体被错误转换为编码的问题，并提供了解决方案，即通过替换编码为对应的英文名称来修正。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打包之后的：font-family:\5FAE\8F6F…
多了一个反斜杠
定位是写字体的时用汉字的原因，汉字打包成会被译成编码
替换成对应的英文就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Borage21

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-cli2项目webpack3 和webpack4环境中：Element-UI在vue项目中，打包build后字体、图标丢失（亲测可解决）

happy81997的博客

11-15

2143

Element-UI在vue项目中，打包build后字体、图标丢失应用场景： F12报错提示：问题原因：（1）查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。（2）也就是说实际应该通过/static/fonts/**...

在vue项目中webpack打包后字体不生效

若晨工作室

09-20

8016

最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图：打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号，但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效。解决方法：尝试了一下去掉双引号，也就是font-family:微软雅黑，这

参与评论您还未登录，请先登录后发表或查看评论

解决在vue项目中webpack打包后字体不生效的问题

10-18

今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题

weixin_29288313的博客

01-13

1285

vue-cli2项目webpack3 和webpack4环境中：Element-UI在vue项目中，打包build后字体、图标丢失（亲测可解决）(2)

最新发布

2401_84433974的博客

05-16

367

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】（1）查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成相应的文件。（2）也就是说实际应该通过 /static/fonts/** 路径来获取字体图标，而实际却是请求 /static/css/st。

使用Webpack打包vue-cli的项目后,字体图标等失效的解决办法

qq_41557320的博客

03-29

1497

找到build文件夹中的这个文件：build/webpack.prod.conf.js module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: false, usePostCSS: true }) }, 将extr...

vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

11-19

由于Vue CLI和Webpack打包后生成的文件结构与源代码结构不同，因此需要使用绝对路径或者相对打包后的路径来确保文件能被正确引用。 7. **webpack.base.config.js**：有些情况下，你可能需要在`webpack.base....

vue全局字体不生效的问题

浮游的博客

07-26

1706

今天接手了一个新项目，在熟悉项目的时候，意外发现，网站的字体和设计稿上的字体不一样。虽然只是一个小问题，但这种问题其实很常见，记录下来，以后翻看~于是查看一番之后，发现引入字体的方式错了。问题出在，没有引入字体。

vue 打包后，后缀名为.woff等字体问题不能用解决办法

weixin_30599769的博客

12-12

1433

1、打开 build /webpack.prod.conf.js ，找到 module: { 　　rules: utils.styleLoaders({ 　　　　sourceMap: config.build.productionSourceMap, 　　　　extract: true, 　　　　usePostCSS: true 　　}) ...

vue 打包上线后字体图标不显示

inticaler的博客

06-21

355

在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-loader'].concat(loaders) } 加上 publicPath: '...

基于vue打包后字体和图片资源失效问题的解决方法

11-29

1. vue打包后font-awesome字体失效解决方案： 2. 打包后图片资源失效解决方案：针对html中引用的图片针对css添加的背景中引用的图片以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue饿了么学习笔记（4）icon字体加载问题，提示 These relative modules were not found: ./font/sell-icon.eot...

qq_22317389的博客

03-18

7022

找不到模块的路径，后在package.json加载了file-loader之后发现还是不行，原来是项目内的路径没有改，自动生成文件时，icon.styl中路径默认为 src: url('fonts/sell-icon.eot?2f8f02'); src: url('fonts/sell-icon.eot?2f8f02#iefix') format('embedded-opentype'),...

vuecli3引入字体文件失败

yingzhi3104的博客

04-16

2233

使用vue-cli搭建项目，需要引入font-icon文件，图标不显示，然后报错解决方案：由于使用vue-cli后，引入css 样式表的写法也发生了改变，正确写法: @import '~@/路径' 需要使用绝对路径，相比较js文件的 '@'，引入css文件需要使用 '~@' 　　　 ...

vue中怎么引入字体包（超详细）

热门推荐

前端学习笔记

05-24

1万+

vue中怎么引入字体包一、创建文件并添加字体包 1、在src里面的assets文件中创建text文件（没有assets文件可以自己创建一个，也可以不用此命名）； 2、把字体包放入text文件，并创建一个text.css文件（命名随意），把字体包引入text.css文件中，font-family建议使用英文。 text.css文件内容 @font-face { font-family: "JDZY"; src: url('./font.woff'); font-weight: no

vue打包后，font格式错误

Start2019

03-04

802

本地测试没有问题，项目打包以后，浏览器打开控制台，提示font格式错误：把我的双引号给去掉了。。。-^- 不开心。解决办法： 1. 把 font: 字体粗细字体大小/行高 "字体样式"; 分开来写。改成： font-size:字体大小;、font-family:字体样式、line-height:行高等，分开来写。 2. 把字体样式改成英文。（参考-张鑫旭）像这样的情况，打包后会把中文...

CSS在设置font-family字体时需要注意的问题

"✧treasure mountain✧"

03-07

1万+

1、网页中普遍使用14px+的字号 2、尽量使用偶数的数字字号 ie6等老式浏览器显示奇数会有bug 3、各种字体之间必须使用英文状态下的逗号隔开 4、中文字体需要加英文状态下的引号英文字体一般不需要加引号当需要设置英文字体时英文字体名必须位于中文字体名之前 5、如果字体名中包含空格 # $等符号则该字体必须加英文状态下的单引号或双引号例：font-family: “Times New...

vue打包后字体和图片资源失效问题

weixin_37626925的博客

01-29

2208

1. vue打包后font-awesome字体失效解决方案： 2. 打包后图片资源失效解决方案：针对html中引用的图片针对css添加的背景中引用的图片

Vue中引入字体失效 .ttf

2301_77708638的博客

02-29

1539

1. 把字体格式 .ttf转为 .woff 就可以用了下面是一个转换器。2.因为无法解析.ttf文件需要额外配置解析文件，还有事，弄完再配。解决：默认正常操作导入字体文件没问题。引入字体失效 .ttf格式。

webpack之项目中引入字体

coding...

05-04

8453

前言：本文演示了如何在项目中应用字体图标；用到的loader: file-loader正文：在common下面新建fonts文件夹，并在其中加入我们手动下载好的字体文件（这里使用开源项目Ionicons）：编辑我们的style/main.css文件。在app.js中引入main.css文件：这里根据以往经验，我们知道这里需要一个loader来处理我们的字体图标。这里，我们需要loader帮我们做两...

vue2 打包后阿里矢量图标icon失效

06-08

如果你使用的是阿里矢量图标库，那么在打包后可能是因为字体文件的路径不正确，导致 icon 无法显示。解决方法： 1. 确认字体文件路径是否正确在打包后的文件中，查看字体文件的路径是否正确。可以使用 Chrome ...

vue项目webpack打包后 字体失效

vue项目webpack打包后字体失效