VUE更改项目默认图标

问题:用自己的favicon.ico图标去替换默认自带的图标,发现替换不掉,无论是删除它还是替换它,它都会马上变成它原来的样子。

解决方案如下:

1.首先将自定义的图片改成favicon.ico格式和名称
2.然后将图片保存在static文件夹下(或者其他文件下都行,下面路径需要替换,建议按照这个进行)


3.在index.html页面引入下面两行代码

3.在index.html页面引入下面两行代码 

    <link rel="icon" href="static/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />

保存重启后刷新浏览器就可以显示图标了。 运行后你会发现一个比较神奇的事:你之前特别想替换的Vue图标 它自动变成了你的图标!!当然static文件夹下你的图标还在。这样的话就可以删除static文件夹,然后将index.html代码修改成以前的(重新运行后也可以不手动删那两行代码,它可以自动变成下面这样)

 <link rel="icon" href="<%= BASE_URL %>favicon.ico">

 把其他格式的图片转为ico格式的软件用的是:PNG-to-ICO

下载地址:https://wwc.lanzouw.com/iaOgf0d0y2yj
密码: d0gz

使用方法:下载软件后,直接双击exe文件完成自动安装,然后如下图所示,右键点击需要转化的PNG图片,可以发现此时选项中多出了“PNG to ICO”选项,直接点击,然后就会发现此文件夹中已经多出了一项同名ICO文件。

 

或者最简单的在线免费转化成ICO的网址:在线生成透明ICO图标——ICO图标制作 

### 回答1: 要修 Vue 项目图标和标题,需要在 Vue 项目的 public 目录下添加 favicon.ico 文件作为图标,并在 index.html 中通过标签修标题。 具体步骤如下: 1. 在 public 目录下添加图标 favicon.ico 2. 在 index.html 中的 head 标签中修标题,例如: ``` <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>修后的标题</title> </head> ``` 修完成后,重新启动项目即可生效。 ### 回答2: 要修Vue项目图标和标题,可以按照以下步骤进行操作: 1.图标:首先需要找到一个想要作为项目图标的图片,并确保其格式是合适的,比如一个.ico或者.png格式的图标文件。接着,将这个文件复制到Vue项目的`public`文件夹中。 2.Vue项目的`public`文件夹中找到`index.html`文件,并打开它。在这个文件中,可以找到一个类似下面的代码片段: ```html <link rel="icon" href="<%= BASE_URL %>favicon.ico"> ``` 将`favicon.ico`替换为你在第一步中复制到`public`文件夹中的图标文件名,保存并关闭`index.html`文件。 3.标题:要修项目的标题,可以在Vue项目的`src`文件夹中找到`main.js`文件,并打开它。在这个文件中,可以找到以下代码片段: ```js new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` 通过在这段代码中的`render`方法中添加一个`head`选项,可以动态地设置项目的标题。例如: ```js new Vue({ router, store, render: h => h(App), head: { title: '你想要的标题' } }).$mount('#app') ``` 保存并关闭`main.js`文件,重启Vue项目,你将会看到新的图标和标题生效了。 这就是修Vue项目图标和标题的方法。记得在完成修后,重新启动项目以使更改生效。 ### 回答3: 要修Vue项目图标和标题,可以按照以下步骤进行操作: 1.图标:首先,将需要替换的图标文件准备好,通常为.ico或.png格式。然后,在Vue项目的根目录中找到public文件夹,将图标文件放置在该文件夹下。 2. 在public文件夹中找到index.html文件,并打开它。在该文件中,可以找到一个类似于`<link rel="icon" href="<%= BASE_URL %>favicon.ico">`的代码行,其中的favicon.ico就是默认的网页图标。 3.默认图标文件名修为新图标文件名。例如,如果新的图标文件名为new-icon.ico,那么将代码行修为`<link rel="icon" href="<%= BASE_URL %>new-icon.ico">`。 4. 保存index.html文件。 5.标题:打开项目的src文件夹,找到main.js文件并打开。在该文件中,可以找到一个类似于`document.title = 'Vue App'`的代码行,其中的'Vue App'即为项目的标题。 6.默认的标题修为新的标题。例如,如果新标题为'New Vue App',那么将代码行修为`document.title = 'New Vue App'`。 7. 保存main.js文件。 8. 重新运行Vue项目,可以看到新的图标和标题已经生效。 总结:通过将新的图标文件放置在public文件夹下,并修index.html文件中的图标文件名,再在main.js文件中修标题,即可成功修Vue项目图标和标题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值