[React] 如何在React 项目中添加 favicon.ico

2023-12-02 22:02| 来源: 网络整理| 查看: 265

如何在React 项目中添加 favicon.ico 一、使用 create-react-app 搭建的项目二、未使用脚手架搭建的项目

一、使用 create-react-app 搭建的项目

如果将文件放入 public 文件夹，Webpack 将不会处理它。相反，它将被复制到构建文件夹中。要引用 public 文件夹中的资源，需要使用名为 PUBLIC_URL 的特殊变量。

注意：

1、favicon.ico 或者 png 等其他格式的图片，必须放在 public 文件夹下（也就是跟 index.html 同级）

2、设置 favicon 后发现浏览器里的图标并没有改变，可能是缓存问题，需要强制清除缓存。

官方文档详细解释：https://www.html.cn/create-react-app/docs/using-the-public-folder/

二、未使用脚手架搭建的项目

修改 Webpack.config.js 文件中的 HtmlWebpackPlugin 配置，目的是在webpack 打包之后在 index.html 中写入favicon.ico 文件

new HtmlWebpackPlugin({ template: 'src/index.html', chunks: ['main'], ENV_ID: ENV_ID ? `?env_id=${ENV_ID}` : '', CLIENT_ID, // favicon: path.resolve('favicon.ico'), 注意这里的路径 favicon: path.join(__dirname, ('public/favicon.ico')), }),

HtmlWebpackPlugin 插件配置项指南

path.resolve 与 path.join 的区别： https://juejin.cn/post/6844903861920989198

【本文地址】

公司简介

联系我们