vue项目配置favicon图标

vue helloweb 次浏览 已收录 评论() 扫描二维码
扫描二维码

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

1fc6eaa4eaefa5c46d66f6353de1e559.jpg

首先将准备好的 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” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享