Vue-cli3的favicon修改问题

亦凉 2023-10-11 14:19 6阅读 0赞

新的项目用vue-cli3来搭，以前都是用vue-cli2来做，一开始还有些不熟悉。在项目快结束的时候正好需要更换浏览器导航的icon，发现并没有那么简单。。。

一开始就以为简单的在public文件夹中的index.html中更换：

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

![format_png][]

目录

结果并不起作用。。。在网上找了一堆答案，但是都是vue-cli2的，最后没办法只好回去看官方配置，发现原来是缺少了pwa这个配置（pwa配置在vue-cli3中是在vue.config.js文件中进行），添加以下代码即可更换favicon。

module.exports = {
      baseUrl     : './',
      outputDir   : 'dist',
      assetsDir   : 'assets',
      devServer   : {...},
      // 以下是pwa配置
      pwa         : {
        iconPaths: {
          favicon32     : 'favicon.ico',
          favicon16     : 'favicon.ico',
          appleTouchIcon: 'favicon.ico',
          maskIcon      : 'favicon.ico',
          msTileImage   : 'favicon.ico'
        }
      }
    }

将favicon.ico放入public与dist文件夹

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjM0NzUxNi1iNjc1YWY0ZDQ3MmY0MjYyLmpwZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzIyMi9mb3JtYXQvd2VicA?x-oss-process=image/format,png

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-cli3的favicon修改问题

新的项目用vue-cli3来搭，以前都是用vue-cli2来做，一开始还有些不熟悉。在项目快结束的时候正好需要更换浏览器导航的icon，发现并没有那么简单。。。一开始就以为

亦凉/ 2023年10月11日 14:19/ 0 赞/ 7 阅读

相关 vueCli3 身份证正则校验

js / @Description:身份证校验规则. / //校验身份证号 export function isIdentity

秒速五厘米/ 2023年10月03日 00:47/ 0 赞/ 72 阅读

相关 VueCli3项目解决打包问题

背景描述：自己之前做了一个vue的小案例，但是从来没有用过npm run build,果真遇到了挺多令人头疼的问题！然后在这里和大家分享一下！项目技术：VueCli3脚手

ゞ浴缸里的玫瑰/ 2023年09月26日 10:01/ 0 赞/ 156 阅读

相关 vuecli3.0 配置vue-router

安装直接在命令行打开项目目录然后输入以下代码进行安装 npm install vue-router 配置路由 1.使用`router-view`标签设

布满荆棘的人生/ 2023年06月15日 09:49/ 0 赞/ 208 阅读

相关 vuecli3 多页面配置

vuecli3 多页面配置项目结构 1. login文件配置（有配置路由） login文件目录 lo

落日映苍穹つ/ 2023年01月19日 03:24/ 0 赞/ 489 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 381 阅读

相关 js动态修改网站的favicon

//页面设置favicon > var faviconurl="https://....." ;//这里可以是动态的获取的favicon的地址

我就是我/ 2022年11月26日 08:56/ 0 赞/ 387 阅读

相关使用vuecli3配置vux2热更新的问题

首先贴一下解决的代码 ![70][] 需要注意的是，我之前baseUrl都配错了，刷新的报错 “<”的错误，其实就是路径的问题，刷新后找不到文件上次用vuecli

绝地灬酷狼/ 2022年05月14日 06:26/ 0 赞/ 375 阅读

相关 Vuecli3+express实现跨域

目录一，本地跨域二，线上跨域 -------------------- 一，本地跨域首先，本地服务器地址开放的是3000端口，云服务器上开发的是4

阳光穿透心脏的1/2处/ 2021年07月25日 17:22/ 0 赞/ 731 阅读

相关 VueCli3中加载Cesium.js

更多Cesium示例代码：[https://sandcastle.cesium.com/][https_sandcastle.cesium.com] 首先下载Cesium.

缺乏、安全感/ 2021年07月25日 11:54/ 0 赞/ 1524 阅读