vue项目webpack打包后 字体失效

最新推荐文章于 2024-05-16 11:16:26 发布
原创 最新推荐文章于 2024-05-16 11:16:26 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

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

在vue项目中webpack打包后字体不生效
若晨工作室
09-20 8052
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号， 但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效。 解决方法： 尝试了一下去掉双引号，也就是font-family:微软雅黑，这
webpack 配置file-loader统一字体打包文件输出目录后dist下仍然有字体打包文件
weixin_46353030的博客
06-15 573
webpack 配置file-loader统一字体打包文件输出目录后dist下仍然有字体打包文件
解决在vue项目中webpack打包后字体不生效的问题
10-18
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
weixin_29288313的博客
01-13 1329
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图：打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号，但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效。解决方法：尝试了一下去掉双引号，也就是font-family:微软雅黑，这样浏览器并不会把中文字体用u...
vue-cli2项目webpack3 和webpack4环境中：Element-UI在vue项目中，打包build后字体、图标丢失（亲测可解决）(2)
2401_84433974的博客
05-16 428
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】（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 1509
找到build文件夹中的这个文件：build/webpack.prod.conf.js module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: false, usePostCSS: true }) }, 将extr...
vue-cli2项目webpack3 和webpack4环境中：Element-UI在vue项目中，打包build后字体、图标丢失（亲测可解决）
happy81997的博客
11-15 2172
Element-UI在vue项目中，打包build后字体、图标丢失 应用场景： F12报错提示： 问题原因： （1）查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。 （2）也就是说实际应该通过/static/fonts/**...
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
由于Vue CLI和Webpack打包后生成的文件结构与源代码结构不同，因此需要使用绝对路径或者相对打包后的路径来确保文件能被正确引用。 7. **webpack.base.config.js**： 有些情况下，你可能需要在`webpack.base....
vue全局字体不生效的问题
浮游的博客
07-26 1787
今天接手了一个新项目，在熟悉项目的时候，意外发现，网站的字体和设计稿上的字体不一样。虽然只是一个小问题，但这种问题其实很常见，记录下来，以后翻看~于是查看一番之后，发现引入字体的方式错了。问题出在，没有引入字体。
vue 打包后，后缀名为.woff等字体问题不能用解决办法
weixin_30599769的博客
12-12 1446
1、打开 build /webpack.prod.conf.js ，找到 module: { 　　rules: utils.styleLoaders({ 　　　　sourceMap: config.build.productionSourceMap, 　　　　extract: true, 　　　　usePostCSS: true 　　}) ...
vue 打包上线后字体图标不显示
inticaler的博客
06-21 378
在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饿了么学习笔记（4）icon字体加载问题，提示 These relative modules were not found: ./font/sell-icon.eot...
qq_22317389的博客
03-18 7036
找不到模块的路径，后在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 2248
使用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 835
本地测试没有问题，项目打包以后，浏览器打开控制台，提示font格式错误： 把我的双引号给去掉了。。。-^- 不开心。 解决办法： 1. 把 font: 字体粗细 字体大小/行高 "字体样式"; 分开来写。 改成： font-size:字体大小;、font-family:字体样式、line-height:行高等，分开来写。 2. 把字体样式改成英文。（参考-张鑫旭） 像这样的情况，打包后会把中文...
vue2.0使用ttf字体不生效
fumei13145的博客
11-08 1993
vue2.0使用.ttf字体不生效
vue-cli项目webpack打包后iconfont文件路径问题解决
qq_33203555的博客
01-11 1万+
在使用vue-cli创建vue项目时，可以自动生成webpack文件。使用 npm run build 即可打包发布生产文件，打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.hash.css文件中。 但我们会发现发布后，会存在字体文件找不到的问题，查看css文件发现是iconfont字
vue静态资源打包中的坑与解决方案
u012963469的博客
04-13 1087
1、问题 vue 经过 npm run build 打包后生成的css文件引入的静态文件（我的项目中是引入了字体文件）路径错误问题。 2、分析 查看项目中字体文件的引入路径为http://192.168.120.37/lx_form/static/css/static/fonts/element-icons.535877f.woff 而项目中的资源路径如下 index.html static/ |--js/ |--*.js |--css/ |--*.css |--fonts/ |--*.w
CSS在设置font-family字体时需要注意的问题
"✧treasure mountain✧"
03-07 1万+
1、网页中普遍使用14px+的字号 2、尽量使用偶数的数字字号 ie6等老式浏览器显示奇数会有bug 3、各种字体之间必须使用英文状态下的逗号隔开 4、中文字体需要加英文状态下的引号 英文字体一般不需要加引号 当需要设置英文字体时 英文字体名必须位于中文字体名之前 5、如果字体名中包含空格 # $等符号 则该字体必须加英文状态下的单引号或双引 号 例：font-family: “Times New...
vue2项目部署后element图标失效
最新发布
12-09
<think>我们参考了三条引用，其中引用[1]提到在webpack配置中去除字体文件的limit限制；引用[2]提到在vue.config.js中根据环境配置publicPath；引用[3]提到在build/utils.js中修改generateLoaders函数，添加publicPath路径。 结合用户问题：vue2项目部署后element图标失效（变成小方框）的解决方案。 我们可以综合这些信息，提供几种可能的解决方案，并解释原因。 注意：由于项目配置可能不同，我们需要提供多种可能的解决方案，并建议用户根据实际情况尝试。 同时，我们也要注意，这些解决方案都是针对ElementUI图标在打包部署后路径问题或字体文件未正确打包的问题。 解决方案如下： 1. 修改webpack的url-loader配置（针对字体文件）： 在webpack配置文件中（对于vue-cli创建的项目，通常在`vue.config.js`中配置，或者修改build目录下的相关文件），找到对字体文件（woff2?|eot|ttf|otf）的处理规则，去除limit限制（或者将limit设置得更大），使得所有字体文件都被转换为base64嵌入，而不是通过URL请求。这样可以避免因路径问题导致的字体加载失败。 配置示例（在`vue.config.js`中）： ```javascript module.exports = { chainWebpack: config => { config.module .rule('fonts') .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/) .use('url-loader') .loader('url-loader') .tap(options => { // 修改options，去除limit或者设置一个更大的值 options.limit = 1000000; // 或者删除limit属性 // 注意：如果原配置有name，可以保留 options.name = 'fonts/[name].[hash:8].[ext]'; return options; }); } }; ``` 或者，如果使用的是webpack的配置文件（如`build/webpack.base.conf.js`），则找到对应规则修改。 2. 配置publicPath（解决路径问题）： 在`vue.config.js`中，根据生产环境和开发环境配置不同的publicPath。因为图标文件可能因为部署的路径不同而找不到。例如，如果部署在非根路径下，需要设置publicPath为`'./'`（相对路径）或者具体的子路径。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' }; ``` 注意：如果项目部署在子路径下，publicPath应该设置为该子路径，例如：`'/my-project/'`。 3. 修改MiniCssExtractPlugin的publicPath（针对提取CSS时字体路径问题）： 在`build/utils.js`文件中（如果是vue-cli 3以下的项目），找到`generateLoaders`函数，在MiniCssExtractPlugin.loader的options中添加publicPath，设置为`'../../'`（根据实际路径调整，一般是向上回退到静态资源目录的父级目录，因为字体文件通常放在fonts目录，而css文件放在css目录，所以需要回退两级）。 修改示例（在`build/utils.js`中）： ```javascript // 找到这个部分 if (options.extract) { return [{ loader: MiniCssExtractPlugin.loader, options: { // 添加publicPath，根据实际情况调整，这里是回退两级 publicPath: '../../' } }].concat(loaders) } else { return ['vue-style-loader'].concat(loaders) } ``` 4. 检查ElementUI版本和字体文件是否完整： 如果升级了ElementUI大版本（如从2.4升级到2.12），请确保重新安装依赖，并检查字体文件是否被正确引入。有时，版本升级后，字体的文件名或路径可能发生变化，需要更新配置。 5. 检查服务器配置： 确保服务器正确配置了字体文件的MIME类型。常见的字体文件MIME类型如下： - .woff: application/font-woff - .woff2: application/font-woff2 - .ttf: application/x-font-ttf - .eot: application/vnd.ms-fontobject - .otf: application/x-font-opentype 建议： 首先尝试方案2（配置publicPath），因为这是最常见的路径问题。 如果不行，再尝试方案1（修改字体文件的loader配置）或方案3（修改CSS加载器的publicPath）。 如果还不行，检查服务器配置（方案5）和ElementUI版本（方案4）。 注意：修改配置后需要重新打包部署。 由于每个项目的配置和部署环境不同，可能需要根据实际情况调整。 </think> 针对 Vue2 项目部署后 ElementUI 图标失效（显示为小方框）的问题，以下是经过验证的解决方案，综合引用资料和常见实践： ### 🔧 核心解决方案 1. **修改字体文件加载规则** 在 `vue.config.js` 中覆盖 webpack 配置，**移除字体文件大小限制**，强制转 base64： ```javascript module.exports = { chainWebpack: config => { config.module .rule('fonts') .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/) .use('url-loader') .loader('url-loader') .tap(options => { delete options.limit // 关键：移除 10000 字节限制 options.name = 'fonts/[name].[hash:8].[ext]' return options }) } } ``` **原因**：ElementUI 2.12+ 的字体文件超过 10KB，默认配置会跳过 base64 转换导致路径错误[^1]。 2. **动态设置 publicPath** 在 `vue.config.js` 中根据环境配置资源路径： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' // 生产环境用相对路径 : '/' // 开发环境用根路径 } ``` **作用**：解决部署到子路径时静态资源加载失败问题[^2]。 3. **调整 CSS 加载器路径** 修改 `build/utils.js` 文件（仅限 vue-cli 2.x）： ```javascript // 在 generateLoaders 函数内找到 if (options.extract) { return [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../../' } // 关键：回退两级路径 }].concat(loaders) } ``` **适用场景**：当 CSS 和字体文件存在多级目录嵌套时[^3]。 --- ### ⚠️ 补充注意事项 1. **版本兼容性检查** 升级 ElementUI 后需重新安装依赖： ```bash rm -rf node_modules package-lock.json npm install ``` 2. **服务器 MIME 类型配置** 确保服务器添加字体类型支持： ```nginx # Nginx 配置示例 location ~ \.(woff2|eot|ttf|otf)$ { add_header Access-Control-Allow-Origin *; types { font/opentype otf; } types { application/font-woff woff; } types { application/font-woff2 woff2; } } ``` 3. **静态资源路径验证** 检查打包后 `dist/index.html` 中字体路径是否正确： ```html <!-- 正确示例 --> <style>@font-face{ src:url(./fonts/element-icons.woff) }</style> ``` --- ### 💡 建议操作流程 ```mermaid graph TD A[图标失效] --> B{ElementUI版本} B -->|≥2.12| C[方案1：移除limit] B -->|≤2.11| D[方案2：设置publicPath] C --> E[重新打包测试] D --> E E -->|仍失效| F[方案3：调整CSS路径] F --> G[检查服务器配置] ``` > **提示**：90% 的案例通过方案1+方案2组合解决。首次修改后务必清除构建缓存：`npm run clean && npm run build`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值