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 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!