首页 前端知识 vue 自定义网页图标 favicon.ico 和 网页标题

vue 自定义网页图标 favicon.ico 和 网页标题

2024-06-25 23:06:22 前端知识 前端哥 264 671 我要收藏

效果预览

在这里插入图片描述

1. 添加配置

vue.config.js

module.exports = { 内添加

  // 自定义网页图标
  pwa: {
    iconPaths: {
      favicon32: "./favicon.ico",
      favicon16: "./favicon.ico",
      appleTouchIcon: "./favicon.ico",
      maskIcon: "./favicon.ico",
      msTileImage: "./favicon.ico",
    },
  },
  // 自定义网页标题
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "观光车调度系统"; // 自定义的网页标题
      return args;
    });
  },

此种方式自定义网页标题是因为项目中使用了插件 html-webpack-plugin
public\index.html 中为

 <title><%= htmlWebpackPlugin.options.title %></title>

也可以直接将其改为

 <title>观光车调度系统</title>

2. 制作图标文件

网页图标的格式为 ico,可通过下方网址进行格式转换
https://www.ico51.cn/

在这里插入图片描述
下载后命名为 favicon.ico

在这里插入图片描述

3. 替换图标文件

用自定义的图标文件,替换 public 文件夹中默认的图标文件 favicon.ico

在这里插入图片描述

4. 启动项目预览效果

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13542.html
标签
评论
发布的文章

JSON、Ajax

2024-07-27 22:07:31

JsonNode、ObjectNode和ArrayNode

2024-07-27 22:07:30

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!