vue中添加favicon 图标 （3种方法）

首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。

方法一：修改index.html文件

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

缺点：打包后需要将favicon.ico复制到根目录

方法二：修改webpack配置文件

1、找到build下的webpack.dev.conf.js文件

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true,

favicon: path.resolve('favicon.ico') // 新增

}),

2、找到build下的webpack.prod.conf.js文件

new HtmlWebpackPlugin({

filename: config.build.index,

template: 'index.html',

inject: true,

favicon: path.resolve('favicon.ico'), //新增

minify: {

emoveComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

...

}),

方法三 ：vue项目打包后favicon无法正常显示

解决方法：

• 在webpack.prod.config.js中的HtmlWebpackPlugin插件选项中配置favicon选项，其中favicon的路径是个相对路径
• new HtmlWebpackPlugin({
• filename: 'index.html',
• template: 'index.html',
• favicon: 'src/assets/img/favicon.ico',
• inject: true
• }),

修改配置文件后需重启npm run dev 
打包后根目录下就会有favicon.ico

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140