vue 下配置标题栏 title 图标及文字的具体步骤

最新推荐文章于 2025-11-22 08:59:49 发布

原创最新推荐文章于 2025-11-22 08:59:49 发布 · 1.3w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue标题栏图片 #vue-cli标题栏图片 #标题栏图片 #html title 图片

vue-js学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在HTML页面和Vue项目中配置网页图标与标题栏文字。对于HTML页面，通过<link>标签设置图标路径；对于Vue项目，需在index.html中设置标题，并放置.ico图标文件，同时修改webpack配置文件引入图片。

1，普通 HTML 页面，配置图标及文字

<head>
  <title>标题栏文字</title>
  <link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>

2，vue 项目中，配置图标及文字

1，在网站根目录下的 index.html 文件中 title 标签中添加标题栏文字
2，将图片.ico 文件放在网站根目录下
3，修改 build 文件夹下 webpack.prod.conf.js 和 webpack.dev.conf.js 文件

var path = require('path') // 开头引入 path 模块
....
// HtmlWebpackPlugin 中添加 favicon
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  favicon: path.resolve('favicon.ico'), // 引入图片地址
  inject: true
})