YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志

最新推荐文章于 2025-08-11 17:43:46 发布

YDOOK 林进威的博客

最新推荐文章于 2025-08-11 17:43:46 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： vue3 vue-cli4 icon ydook JYLin

版权归作者 YDOOK JY Lin所有，未经同意，不可转载。同意转载后必须标明署名与出处。

本文链接：https://blog.csdn.net/weixin_42255190/article/details/113804049

Web 专栏收录该内容

118 篇文章

订阅专栏

本文档介绍了在Vue3项目中，使用vue-cli4更新页面ICON图标的具体步骤。包括将新图标文件放入指定目录，配置vue.config.js，修改index.html文件中的图标引用，以及重新启动项目使更改生效。

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

YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志

© YDOOK JYLin

1. 将新 icon 文件拖入文件目录： ./public:

YDOOK

2. 新建或者在已有的 vue.config.js 文件根位置中输入：

module.exports = {
    pwa: {
        iconPaths: {
            favicon32: 'ydook.ico',
            favicon16: 'ydook.ico',
            appleTouchIcon: 'ydook.ico',
            maskIcon: 'ydook.ico',
            msTileImage: 'ydook.ico'
        }
    }
}

3. 修改： ./public/index.html 文件：

由：

<!DOCTYPE html>
<html lang="">

<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>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

变为：

<!DOCTYPE html>
<html lang="">

<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 %>ydook.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>