修改vue项目的title左边的icon

最新推荐文章于 2025-07-23 13:32:05 发布

原创

最新推荐文章于 2025-07-23 13:32:05 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#修改title左侧的icon

本文介绍了如何在Vue项目中更改浏览器标题左侧的icon。首先，将favicon.ico图标放置于项目根目录。然后，在index.html文件中添加相应代码。接着，修改build目录下的webpack.prod.conf.js和webpack.dev.conf.js配置文件，引入favicon.ico路径。最后，重新运行并打包项目，完成icon的更新。

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

1、icon命名为favicon.ico放在项目根目录；

2、在index.html中写入：

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

3、修改build下面webpack.prod.conf.js和webpack.dev.conf.js：

修改：添加一行favicon: path.resolve('favicon.ico'), // 引入图片地址

webpack.prod.conf.js：

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      favicon: path.resolve('favicon.ico'), // 引入图片地址
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via Comm