vue项目webpack打包后字体失效

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1k累计阅读 1.1k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄11年

关注

原创最新推荐文章于 2026-10-15 10:37:28 发布 1k 阅读 AI 写同款· GEO 优化 ›

vue 项目打包时样式及背景图片路径找不到问题描述：vue项目打包后，文件找得到，但是引用的字体及背景图片找不到；解决方法：阅读详情

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

收录于

技术

当前文章被收录于：

技术

14 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

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

相关推荐

群晖Web Station实战：从零搭建个人静态导航站

本文详细介绍了如何利用群晖NAS自带的Web Station套件，从零开始搭建个人静态导航站。通过安装Web Station、上传静态网站源码、配置网页服务与网络门户等步骤，无需代码基础即可实现内网访问。文章还分享了文件权限设置、个性化定制及常见问题排查等实用技巧，帮助用户高效管理个人常用网址，充分挖掘NAS的服务器潜能。

tea88的博客 1330

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

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

weixin_29288313的博客 1378

Win11桌面图标小箭头去除与恢复：解决任务栏关联错误的完整指南

本文提供了一份完整的Win11桌面图标小箭头去除与恢复指南，重点解决了因错误方法导致的任务栏关联错误问题。通过分析注册表中IsShortcut键值与Shell Icons的原理，推荐安全的“替换图标资源法”，并提供了可一键执行的批处理脚本，确保在美化桌面的同时不影响系统功能与默认应用设置。

weixin_29288313的博客 944

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

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

weixin_30599769的博客 1471

新手避坑指南：用COMSOL Multiphysics仿真气体放电（汤逊vs.流注）

本文详细介绍了使用COMSOL Multiphysics仿真气体放电的实战指南，涵盖汤逊理论和流注模型的实现方法。通过对比两种放电模型的关键参数和物理场配置，帮助新手避免常见错误，准确预测气体击穿过程。文章还提供了工程应用案例，如高压绝缘子设计优化，展示了仿真技术在电力设备绝缘设计中的实际价值。

weixin_28716181的博客 472

记一次在JAVA中客户端使用axis调用webservice服务端出现的异常：Unmarshalling Error: For input string: ""

在使axis调用webservice服务端，参照网上给的demo： Call call = (Call) service.createCall(); call.setTargetEndpointAddress(endpoint);//设置服务请求路径 QName qn = new QName(name); call.setOperationName(qn); call.addParamet

kry1201的专栏 8080

vue全局字体不生效的问题

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

浮游的博客 1831

微信小程序 - 详细实现打开跳转第三方 H5 网页链接，在微信小程序内直接跳转打开第三方网站链接详细教程（支持跳转公众号文章等，直接复制代码即可）

小程序跳转h5，小程序-Taro小程序中打开h5页面链接，...小程序跳转h5链接(web-view)_微信小程序，小程序如何跳转h5页面，小程序跳转到第三方H5网页，微信小程序跳转第三方H5的方法，小程序-实现怎么跳转打开H5网页链接(或跳转至公众号文章，打开第三方网站，放校验文件，怎么配置业务域名，校验文件验证域名，把校验文件放到对面网站，别人的服务器也打不开没权限怎么放呢，勾选不校验合法域名，txt，打不开别人的网页怎么办，真机调试打不开，无法跳转，有什么其他办法不放校验文件吗，后台配置，怎么

🏆 前端领域优质创作者 3万+

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

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

happy81997的博客 2215

使用SIMD思想进行memcpy的优化

arm64平台的memcpy的性能优化，相比C库提升30~40%，SIMD优化思路

zhaoxin1989的博客 1万+

PCL点云处理之计算点到空间直线距离的四种方法（二十三）

PCL点云处理之计算点到空间直线距离的四种方法

weixin_44329757的博客 3022

vue打包后，font格式错误

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

Start2019 877

DeerFlow 系列教程第十一篇 | Sandbox 沙箱与 Memory 记忆——安全执行与持久认知

用户请求│▼Lead Agent├── 系统提示词组装│ ├── <memory> 段 ← Memory 系统注入用户记忆│ ├── <skill_system> 段│ └── <subagent_system> 段│├── 工具调用│ ├── read_file ├── Sandbox 系统提供隔离执行│ ├── write_file├── 路径虚拟化 + 安全验证│└── 对话结束│▼│├── 过滤消息（去除工具调用中间步骤）├── 检测纠正/强化信号。

weixin_43674738的博客 161

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

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

qq_41557320的博客 1527

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

vue打包上线部分css效果错乱,解决Vue打包上线之后部分CSS不生效的问题

解决Vue打包上线之后部分CSS不生效的问题首先注释掉webpack.prod.conf.js中下面的代码new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),然后在utils.js中...

weixin_29358723的博客 2938

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

解决vue2项目打包后element图标失效的问题

今天打包vue2项目时，打包完成之后发现element图标失效，网上找的方法修改 build/utils.js 发现并不适配自己的项目；2.找到test: /\.(woff2?publicPath: '../../' // 新增内容。1.找到项目中build文件夹中的webpack.base.conf.js文件。这种打包问题比项目中遇到的一般问题更难排查解决，记录一下~

mango339的博客 1080

复分析阿尔福斯(Ahlfors) 第三版答案英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

Vue 静态文件引入完全详解（附避坑指南，Vue 2/3 通用）

搞懂 public 与 assets 区别，解决 90% 静态文件引入问题

qq_38305872的博客 802

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

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

weixin_37626925的博客 2251

彻底解决 Vue 打包后静态资源图片失效的终极指南

嗨，欢迎来到我的优快云博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。 3160

Vue Element UI webpack 打包后字体图标显示不正常问题解决

weixinhmz的博客 351

关于 electron-vue打包后静态资源路径失效的解决方案

关于 electron-vue打包后静态资源路径失效的解决方案 1.静态资源如css,img，js,请放在根目录的static文件夹里，因为electron打包后会复制一份static文件夹到dist文件夹中这样项目引入的静态资源就不会报路径错误了。 2.字体文件比较特殊，如果引入的是前端框架文件，引入的字体路径不是我们能控制的。所以我们需要修改下C:\Users...

aa661020的博客 2万+

Webpack配置实战：如何用contenthash完美解决Vue项目浏览器缓存问题

本文深入探讨了在Vue项目中，如何通过配置Webpack的contenthash策略，精准解决浏览器缓存导致的代码更新问题。文章详细对比了hash、chunkhash与contenthash的区别，并提供了在Vue CLI项目中配置contenthash的两种实战方法（configureWebpack与chainWebpack），旨在实现内容变化的文件URL更新、内容未变的文件URL保持不变，从而最大化利用浏览器缓存，确保用户及时获取最新应用。

yellow的专栏 877

5 步出 3D 模型｜Hunyuan3D-2 Mini Turbo：图生3D加速与低显存部署的平衡解

Hunyuan3D-2 Mini Turbo 把图生3D的推理步数从 50 步压到 5 步，单次生成约 5 秒。它解决的是"等不起、也装不下"的问题：扩散采样与 VAE 解码两端同时提速。两个关键数字：单模型显存占用 4.8GB，参数规模 0.6B。 ## 能力总览：5 步推理对比 50 步标准版 | 版本 | 推理步数 | 单张生成耗时 | 显存占用 | 参数量 | |---|---|---

gitblog_00450的博客 300

上一篇： elementUI让table的某一列不显示但需要在row里有数据携带到其他页面

下一篇： vue后台带token的图片回显

群晖Web Station实战：从零搭建个人静态导航站

tea88的博客

02-20

1330