vue打包后.woff字体文件路径出现找不到问题处理

最新推荐文章于 2023-09-25 09:09:34 发布

原创最新推荐文章于 2023-09-25 09:09:34 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种在使用Bootstrap并执行npm run build命令后遇到的字体文件找不到的问题及其解决方案。通过在utils.js中添加特定代码来调整公共路径，成功解决了打包过程中出现的.woff等字体文件缺失的情况。

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

引入boostrap时在执行 npm run build 命令打包后，出现 .woff 等字体文件找不到的情况

在这里插入图片描述
在utils.js添加代码

     return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'                //添加这一行代码后再重新打包就可以了
      })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LHC087

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

10-14

在使用Vue CLI和Webpack构建的项目中，遇到打包部署到服务器后ttf字体文件找不到的问题，通常是由于资源路径配置不正确导致的。本文将详细解释这个问题的产生原因以及解决步骤。 1. **问题分析** 当Vue CLI项目...

vue.js iview打包上线后字体图标不显示解决办法

10-15

总的来说，解决Vue.js + iView项目中字体图标不显示的问题通常涉及到调整CSS打包配置和检查字体文件的引用路径。通过上述步骤，大多数情况下可以成功修复这个问题。如果问题依然存在，可能需要进一步检查项目的其他...

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

vue 项目打包后，.woff文件找不到

xiaomanonyo的博客

05-29

1160

今天项目打包上线遇到一个问题，打包发布成功之后，.woff类型的字体文件是404，但是文件的路劲是对的，其他后缀的文件也都能加载出来，一开始以为是配置不正确导致的，后来找了半天，是因为服务器配置的原因，我们用的是iis 在这个MIME类型里面，把.woff的后缀加进去就行了。 ...

vue打包后.woff字体文件路径问题处理

a82022424的博客

06-11

1281

在执行npm run build 命令打包后，如果出现 .woff 等字体文件找不到的情况通过设置vue-style-loader 打包前缀路径解决转载于:https://www.cnblogs.com/fanlu/p/11002744.html...

vue打包之后woff字体不显示

weixin_45670469的博客

03-09

398

vue项目打包之后字体资源不显示找到 build/utils.js 在cssLoaders函数中查看如下代码 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' //新增的 }) } else { return ['

[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题

weixin_44934844的博客

09-21

1642

原因明确，但是本人着实不懂打包的地址配置，截止编写此文，element-ui的字体图标没有得到解决，以至于下拉框等图标还是不显示。在项目的main.js引入的import 'element-ui/lib/theme-chalk/index.css’就不需要了；通过多方查找资料最后又回到了Vue CLI，解决的核心在于此文档URL 转换规则，根据文档我的理解是因为打包，element-ui的样式没有当做静态资源引用。上述的步骤，在 iconfont.cn官网的文档->symbol 引用有详细描述。

vue-cli的webpack打包，icon无法正确加载

weixin_33819479的博客

07-20

369

今天vue-cli打包完发现加载不出font awesome;路经和奇怪，js,css，img都正确加载；首先正确加载静态资源需要将config中的index.js中publicPath:'./'; 而font awesome的坑再于webpack对文件打包大小有限制（此处怪我没有好好学webpack）; 而我发现我的font文件打包后竟有400k！！！！！需要修改webpack.ba...

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

08-27

在Vue项目中，如果你直接在CSS文件中引用了`font-awesome`的字体文件，打包后可能会找不到这些字体文件。这是因为Webpack默认不会处理字体文件，我们需要在`webpack.config.js`或者Vue CLI的配置文件(`vue.config.js...

详解Vue+elementUI build打包部署后字体图标丢失问题

10-15

具体表现是在控制台中显示404错误，找不到`element-icons.woff`和`element-icons.ttf`等字体文件。 ### 解决方案要解决打包后字体图标丢失的问题，关键在于正确配置Webpack，确保在打包过程中资源文件的路径被...

解决加载有.woff页面时，报404错误，找不到.woff文件

flym_的博客

05-01

2603

使用 vue build 之后做网站请求，发现 woff 字体无法获取打包之后，本地打开，显示资源加载失败真实路径应该是 http://keliupc.mncats365.com/static/fonts/ionicons.05acfdb.woff 浏览器实际加载路径为： http://keliupc.mncats365.comdist/static/css/static/fonts/ion...

解决部署vue项目时，提示找不到.woff文件

weixin_56380151的博客

07-17

530

2.如果.woff文件存在，可以查看一下iis中MIME类型是否支持.woff，有些服务器时不支持的需要手动加进去。1.查看font文件下 .woff文件不是否存在若不存在去下载.woff文件即可。文件扩展名　　 MIME类型。

vue中引入字体图标报错，找不到字体文件

amiu69254的博客

11-27

701

在用vue + webpack进行开发的时候，在引用字体图标遇到字体无法加载的问题：报以下错误搞了好久没搞定，最后才找到解决方法（还是没有找到原因）修改字体图标的css中引入字体文件的路径以前的---->>修改后：最后改成绝对路径就好了，但是原因还没搞懂转载于:https://www.cnblogs.com/ahongdepu/...

iconfont引入vue找不到文件

qq_44844751的博客

09-10

590

文件查找失败：’./css/font/iconfont.ttf?t=1631234320335’ at App.vue:7 解决方法：使用绝对路径url(’@/static/css/font/iconfont.woff2?t=1631234320335’) format(‘woff2’)

elementUI build打包后字体图标丢失

qq_35410544的博客

06-17

1885

问题描述：打包后发现element字体路径不对，导致浏览器找不到字体包，无法加载字体解决方法：分2步 1、webpack module配置：(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), {...

vue+element-ui打包后找不到字体库和图标库

littleWell的博客

05-24

1207

打开vue项目，并找到build目录下的utils.js文件找到此处，加入红框中的部分

Web项目发布后字体文件找不到

weixin_30527323的博客

08-06

422

一、问题　　①ASP.NET项目，开发工具Visual Studio 　　②在IIS上发布之后，网页控制台报错，某某文件找不到，但是在服务器文件夹中看明明有那个文件　　　　二、解决方法　　①》》打开IIS，点击你的网站，在右边窗口搜索找到MIME类型　　　　　　》》右击上方，新建MIME类型　　　　　　》》如，字体woff ----> 文件扩展名： ...

【3】npm run build Vue的项目，如何修改相对路径配置

vue打包后.woff字体文件路径出现找不到问题处理

引入boostrap时 在执行 npm run build 命令打包后，出现 .woff 等字体文件找不到的情况

引入boostrap时在执行 npm run build 命令打包后，出现 .woff 等字体文件找不到的情况