Vue项目中ico问题

最新推荐文章于 2024-09-05 17:48:53 发布

菜鸡联盟德莱文

最新推荐文章于 2024-09-05 17:48:53 发布

阅读量448

点赞数

分类专栏：入坑指南

本文链接：https://blog.csdn.net/m0_37811924/article/details/102481306

版权

在Vue脚手架搭建的项目中，ico图标不显示可能是配置问题。解决方法包括修改webpack.dev.conf.js和webpack.prod.conf.js的配置，同时在index.html中添加favicon，并确保运行npm run dev更新项目。

摘要由CSDN通过智能技术生成

ico不显示的问题

在用vue脚手架搭建的项目中发现页面标题的ico图标总也显示不出来，后来发现不仅仅是需要在<head>里面写上<link rel="shortcut icon" href="./favicon.ico">就可以的，还需要配置一下webpack的配置。

webpack.dev.conf.js

//在webpack.dev.conf.js里面的pligins配置增加favicon
new HtmlWebpackPlugin({
   
	filename: 'index.html',
	template: 'index.html',
	inject: true

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

菜鸡联盟德莱文

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

为vue项目网站设置ioc小图标遇到的问题

yanzi_0216的博客

12-29

421

为vue项目网站设置ioc小图标遇到的问题步骤 1，将 favicon.ico 图标文件放在src目录下（我这是为了将其与index.html文件放在同一文件夹下，其实也可以放在src/images文件夹下） 2，在 index.html 文件中引入 ico 图标 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport

关于Vue项目中favicon.ico的应用配置&取消favicon.ico请求

daisymao0205的博客

12-15

6184

首先，一般把favicon.ico（固定命名）放在static里，如下图：在开发环境中，配置webpack.dev.conf.js里的plugins newHtmlWebpackPlugin里加上 favicon:'./static/favicon.ico',相对路径项目打包部署，便配置webpack.prod.conf.js里的plugins newHtmlWebpackPlugin里加上 favicon:'./static/favicon.ico',相对路径 ...

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

Vue脚手架中添加favicon.ico图标失效问题

S筱潇S四维Smile

09-27

1829

最近项目中根目录添加favicon.ico，直接在index.html中加入 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 这种方法本地能添加成功，打包发布后就不成功，也是郁闷了。。在配置文件修改 build/webpack.dev.conf.js & webpack.pro...

Vue2使用Vue CLI学习笔记

最新发布

m0_52458424的博客

09-05

1260

解决vue-cli项目ico图标修改无效问题

九段刀客的博客

11-04

1771

1、public/index.html 直接写死 <link rel="icon" href="favicon.ico" /> 2、vue.config.js中添加配置 pwa: { iconPaths: { favicon32: 'favicon.ico', favicon16: 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon: 'favicon.ico', m

vue自定义网页标签图标不生效的原因和解决办法

HYEHYEHYE的博客

07-19

6424

正常情况下，自定义网页标签图标我们只需要更换下图中的favicon.ico即可，但是最近做项目遇到直接替换favicon.ico有不生效的问题用.jpg或.png格式制作成.ico图标的网站有很多，这里推荐一个比特虫：https://www.bitbug.net/ 发现问题原因后来发现项目使用了@vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa 打开上面链接后可以看到插件更改了网页标签图标的路径

vue-cli3.0以上ico图标更换不了的问题

任磊

12-02

1445

1.vue-cli3构建的项目目录中有public,该目录下的favicon.ico就是指图标，index.html文件里面可以链接该图标。 2.首先将favicon.ico文件修改为自定义的logo，名称不变。以下代码为inde.html中的内容，红色边框中的代码即可链接自己的logo,蓝色边框的代码用于修改标题 4.在vue.config.js里面加入以下代码 module.exports={ pwa:{ iconPaths:{ f...

解决Vue 项目打包后favicon无法正常显示的问题

12-07

在Vue项目中，常见做法是将favicon.ico文件与index.html文件一同放在项目根目录下，并在index.html中正确设置引用路径。然而，这种配置在项目启动或打包后往往无法生效。 Vue项目经过webpack打包后，文件结构会发生...

Vue项目中如何引入icon图标

12-12

在Vue项目中引入图标是一项常见的任务，特别是在构建用户界面时，图标可以极大地增强用户体验和界面美观度。本文将详细介绍如何通过icomoon网站下载并引入图标到Vue项目中。首先，你需要访问icomoon网站...

关于tomcat下启动vue项目，谷歌浏览器中favicon.ico的显示问题

weixin_43751396的博客

04-29

1422

关于favicon.ico的显示问题问题描述：vue项目使用npm run build打包之后，通过Tomcat启动，在谷歌浏览器访问路径错误，出现404，通过火狐访问正常的问题； 1.什么是favicon.ico 1.1 概念 favicon.ico图标是网站的缩略标志，可以显示在浏览器标签、地址栏左边和收藏夹，是展示网站个性的缩略logo标志，也可以说是***网站头像*** 从特定的技术角度看，favicon也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用，一般为了提

解决vue无法解析.ico结尾图片路径

spfLinux的博客

01-16

1874

上面路径是对的，可是报错说找不到，why？后来查找资料才发现，vue框架默认配置图片格式没有ico的，所以需要手动加上在bulid/webpack.base.conf.js中有如下一行： test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,上面这是已经加上ico的，但是发现还是报错，难道还有其他问题？不是的，是因为改了配置后需要退出再启动服务才行。做完这些

vue3修改link标签默认icon无效问题详解

10-16

主要介绍了vue3修改link标签默认icon无效问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue下载本地静态文件测试本地可以下载，生产就不可以解决办法

Hailee7的博客

04-13

937

一般都是路径问题。因为项目路由加了前缀，这是最主要的原因，所以生产找不到，（至于为什么测试可以生产就不行还不清楚）所以public下会有这个iga-auto文件夹，一开始我放在static下，static和iga-auto同级，把static放进iga-auto下，下载路径由/static/XX.xls变为/iga-auto/XX.xls就可以了。 ...

vite 引入public下css、js、json等文件报错问题的研究

wallace_yang的博客

12-28

8897

vite 引入 public下的js、css、json报错

解决：替换public目录下的favicon.icon，路径引入都对，但是图标就不生效。

qq_38969618的博客

03-08

4000

原因：项目中使用了@vue/cli-plugin-pwa插件导致。修改mainfest.json中的icons也无效，只需在vue.config.js中配置pwa选项的iconPaths属性即可。 // public目录下的index.html .... <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="manifest" href="/mainfest.json" /> ... // v

vue2构建一个后端权限管理模板

klz

09-18

1189

vue2构建一个后端权限管理模板

Vue的favicon设置，打包生产开发条件下均可

Dreamy_LIN的博客

07-10

1447

主要是模仿了vue-cli的方式，第一步，将favicon.ico放在static目录下，通过vue-cli 的拷贝插件copy-webpack-plugin，打包后将生成在dist/static的目录下。第二步，修改打包前的index.html，在head里引入favicon.ico，如下，之后运行起来就可以看到了。 <link rel="icon" href="/static/favicon.ico" type="image/x-icon"> 不用vue-cli的话，自己配置拷贝插

vue项目启动Ok，根目录访问就报错：URIError: Failed to decode param ‘/%3C%=%20BASE_URL%20%%3Efavicon.ico‘

qq_41930094的博客

07-08

8255

故事缘由：将vue项目部署到nginx上运行，由于线上的nginx上已经部署过一个前端项目，若继续想在nginx上部署新项目，需要在新的vue项目中，创建了vue.config.js文件，并配置了路径…（步骤省略，有需要我的博客中有）。线上访问没问题，本地项目在根目录下访问时，就会出现报错： URIError: Failed to decode param ‘/%3C%=%20BASE_URL%20%%3Efavicon.ico’ 问题定位：根据报错信息，其实就可以知道可能是新创建的文件，配置

Vue CLI3项目路径问题详解与解决

"Vue CLI3搭建的项目中路径相关问题的解决" 在Vue CLI3搭建的项目中，路径问题经常困扰开发者。这篇分享主要探讨了如何有效地处理这些路径问题，为开发者提供参考。Vue CLI3是一个强大的脚手架工具，用于快速初始化...