Vue 项目webpack打包图标不显示

最新推荐文章于 2024-07-24 17:19:02 发布
最新推荐文章于 2024-07-24 17:19:02 发布
阅读量2.2k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amelia__Liu/article/details/89510231
版权

第一次用VSCode进行打包一个VUE项目

结果放在直接将dist下面的项目拷贝到spring项目下面一运行发现我的阿里云ico图标都不见了,变成了方框,在苹果方框都不显示

图中的方框都为ico图标

我一检查我在VSCode中都是正常的,唯一差异就是打包出了问题,所以百度...(哈哈 首先百度 因为谷歌太多英文有点费脑)

然后看到这样一个回答

启发到我了,路劲问题

我没问前端打包后路径怎么放,以为打好包放进项目就能够使用

打包后的层次这样

直接使用便无法找到图标

然后我更改后是下面这样,也就是按前端之前放的层次来放就正确了

我其实没给出解决方法 ,只是希望大家通过我这个经历来排查问题找到问题及解决办法.

 

Amelia_Liu
关注
专栏目录
vue项目打包elementui的小图标不显示报404问题
tttddd888的博客
04-28 819
build > until.js文件中 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../',// elementui显示图标 路径问题，路径不对导致显示失败 }) } else { return ['vue-style
vue webpack打包后图片不显示问题以及路由页面无法显示问题
weixin_43840538的博客
10-01 1492
我把项目打包后，放到服务器上 ，发现图片什么的都加不出来， 网上说的修改config文件夹下的index.js里的 改为 "./” 我之前早就该过了，没用， 后来又看到一篇博客， 还要修改build文件夹下的utils.js 在里面添加： 参考博客：https://blog.csdn.net/rainbow8300/article/details/83010507 ...
一、vue打包图标不显示解决方法
Hyao-J
07-04 589
打开已经打包后的dist文件看看index.html文件，查看link图片地址 再看看static中img的文件，与之对应即可
vue3加electron打包未成功，并没有安装包和顶部图标不显示问题
最新发布
weixin_44056717的博客
07-24 341
vue3+electron打包未成功，并没有安装包和顶部图标不显示问题
Vue项目打包后icon图标不显示
weixin_45274678的博客
12-28 3177
原因一：路径错误 也就是说实际应该通过 /static/fonts/ 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/，自然报 404 错误。 在build/utils.js找到以下代码 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else
VUE打包图片，icon图标不显示解决方案
qq_40291247的博客
08-06 8244
第一：使用element框架的icon时候，开发环境下是没有问题的，打包完以后出现小方块，页面不显示， 解决办法：找到utils.js文件，加 publicPath: ‘…/…/’ function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, post...
解决在vue项目中webpack打包后字体不生效的问题
10-18
总的来说，解决Vue项目中Webpack打包后字体不生效的问题主要涉及CSS编写习惯、Webpack配置以及浏览器兼容性。选择适合项目需求的方法，可以确保字体在生产环境中的正确显示。在开发过程中，及时检查控制台的元素样式...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）
10-17
2. 使用webpack打包：通过webpack将Vue项目打包为Web可部署的静态文件列表。这一步会生成包含index.html和各种静态资源（如js、css、图片等）的dist目录。 3. HBulider配置：打开HBulider软件，导入已打包的dist...
Vue项目总结之webpack常规打包优化方案
11-30
Vue项目的构建速度优化是开发过程中不可或缺的一环，尤其是在大型项目中，较长的打包时间会影响团队的效率。本文将深入探讨如何使用Webpack进行常规的打包优化，以缩短项目的构建时间。 首先，我们需要理解打包慢的...
vue项目打包之后背景样式丢失的解决方案
10-17
在开发Vue项目时，我们经常会遇到一个问题：在项目打包完成后，部分页面的背景样式丢失，导致页面显示不正常。这主要是由于Vue CLI在构建过程中处理静态资源的方式导致的。本篇文章将详细介绍这个问题的原因以及提供...
vue个别图标本地显示正常，打包部署后不显示的问题
十一
09-15 114
【代码】vue个别图标本地显示正常，打包部署后不显示的问题。
使用electron-builder打包卡在downloading问题解决
weixin_42987525的博客
04-20 1567
复制上面提示的url链接：https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z。使用electron-builder打包一直卡在下面的地方。还会遇到这个文件下载不下情况。2、解压下载的文件包。文件夹，需要手动创建。2、解压下载的文件包。文件夹，需要手动创建。
vue打包elementUI的时候，小图标变成小方框
青烟小生的博客
07-20 2148
在vue的build文件夹找到utils.js文件，然后在下面这个位置添加 publicPath: '../../' function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] if (loader) { loaders.push({ lo
Vue 使用 阿里巴巴 iconfont 没有显示问题
liulang1905的博客
05-19 1778
记录一次小坑，就是可能路径不对，需要放到public下 和 index.html同级就好了 <!-- 你的具体路径 这段在你的index.xml中引入，这里引入可以全局使用，如果单独页面也可以单独引入--> <link rel="stylesheet" href="/icons/iconfont.css"> <!-- 下载后的图标的class --> <span class="iconfont icon-zhankai"></span> 如
webpack4.x打包图片文件遇到效果不显示的问题（file-loader加载遇到的狗血问题）
IT_CREATE的博客
06-21 3291
file-loader加载遇到的狗血问题-webpack4.x 最近在学习vue，看的b站视频学习，b站里面用的是webpack3.6，而我用的是webpack4.43.0版本的，在webpack4.x版本和3.x版本还是挺有区别的，比如配置，打包方式就不一样。在学习到图片文件的打包配置时，遇到了狗血问题，现阶段我还是说一下webpack4.x的操作步骤，怎么样执行到打包图片文件这个地方，遇到了什么问题？（当图片大于limit限制，启动file-loader加载生成文件，生成成功但是页面没有效果，同时配置f
Element UI 部署到服务器，图标不显示问题
weixin_48474646的博客
11-29 2417
vue项目引用Element UI组件后，本地运行时，图标是正常显示的，但是打包部署后，图标不显示。
vue打包后图标不显示的解决方案
骨子里的偏爱
04-17 1070
配置好之后，npm run build打包后就会自动匹配正确的路径，无需手动修改。
Vue项目打包成原生APP：HBulider结合webpack教程
首先，使用vue-cli搭建的Vue项目通过webpack打包成部署文件，接着在HBulider中导入该项目，将web项目转换为APP项目，并配置manifest.json文件以设定应用信息。此外，文章还提到了真机调试的方法，包括在Windows和Mac...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值