vue项目如何修改网页logo

ffikn

已于 2023-10-12 16:29:05 修改

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-10-12 16:27:05 首次发布

本文链接：https://blog.youkuaiyun.com/ffikn/article/details/133793651

本文介绍了如何在Vue项目中制作32X32大小的.ico图片作为favicon，并在vue.config.js中配置PWA以支持不同平台的图标，包括appleTouchIcon和msTileImage。只需替换public文件中的favicon.ico并调整配置即可完成。

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

1、制作一张.ico格式的图片，图片规格为32X32,取名为favicon.ico

2、将刚刚制作好的图片替换vue项目下public文件下的favicon.ico

3、找到vue.config.js文件，添加如下代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pwa: {     //添加此段
    iconPaths: {
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico',
      appleTouchIcon: 'favicon.ico',
      maskIcon: 'favicon.ico',
      msTileImage: 'favicon.ico'
    }
  }
})

4、重新运行项目就好了