Favicon.ico在本地工作，但不在测试服务器上

Question

尝试在测试服务器上设置favicon.ico时，我确实遇到了问题，在本地一切正常。 要访问我的测试服务器，我使用以下URL：

http://app-server/company/companyproject%20test/client/

我具有以下项目结构，并且正在使用webpack。

Project structure

有人知道它是如何工作的吗？

如果您需要更多信息，请随时发表评论。

谢谢。

Answer 1

构建您的应用程序后，dist文件夹中的favicon可能根本不可用。 尝试使用dist（copy-webpack-plugin）将其复制到npm i --save-dev copy-webpack-plugin文件夹

将其作为

导入您的webpack.config.js中

const CopyWebpackPlugin = require("copy-webpack-plugin")

最后按如下所示将其添加到plugins

new CopyWebpackPlugin([{ from: "favicon.ico", to: "favicon.ico" }])

我个人将维护此类资源在一个文件夹中，然后将整个文件夹复制到构建文件夹（dist）中，以防止必须复制单个文件。

new CopyWebpackPlugin([{ from: "icons", to: "icons" }])

从而可以做到

<link rel="icon" href="/icons/favicon.ico">

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">

在您的index.ejs

中