vue项目配置favicon图标，提供多个解决方法，大家自行选择。

首先将准备好的 favicon 图标放在网站对应目录，我这里放在 src/assets/image/ 目录；

方法一：修改首页 index.html 文件

缺点：打包后需要手动将 favicon.ico 复制到根目录，build 打包时不会自动将图片放过去，不推荐

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

方法二：修改 webpack 配置文件

第一步：找到 build 下的 webpack.dev.conf.js 文件

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon: 'src/assets/image/favicon.ico' // 注意路径，相对地址
}),

第二步：找到build下的webpack.prod.conf.js文件

new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    favicon: path.resolve('favicon.ico'), // 注意路径，相对地址
    ...
}),

修改配置文件后需重启 npm run dev ，如果使用方法二，那么打包后根目录下就会有 favicon.ico，刷新浏览器就有了

原文链接：HelloWeb前端网 » vue项目配置favicon图标 » 感谢您的浏览，希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群： 196291215 共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！