解决Vue用Nginx做web服务器报错favicon.ico 404 (Not Found)的问题

时间:2022-04-29 15:00:08

  有多种解决方案

1、vue静态资源

  vue中为网页增加favicon的最便捷的方式为使用link标签

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

  先在static目录下添加favicon,至于为什么要在static下加,待会解释

解决Vue用Nginx做web服务器报错favicon.ico 404 (Not Found)的问题

  然后,在index.html入口加上引入的link标签

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

解决Vue用Nginx做web服务器报错favicon.ico 404 (Not Found)的问题

  然后build打包即可,就不会再报这个错误。

解释:

  从href属性我们可以知道,这个favicon.ico文件被放在static文件夹下。那可不可以像平时的网页那样放在根目录下呢?

  本人测试为false。比如我把其放在src/assets下面,bulid出来发现没有这个favicon.ico这个文件。

  使用vue-cli构建vue项目的最后一步为build,build后得到一个dist文件夹,目录如下:

dist
├── index.html
└── static
├── css
│ ├── app.98d86b95fddce7c6712349c91fd3ac42.css
│ └── app.98d86b95fddce7c6712349c91fd3ac42.css.map
├── favicon.ico
├── img
│ └── icon.b36fe83.png
└── js
├── app.8fece2e344934ca56814.js
├── app.8fece2e344934ca56814.js.map
├── manifest.1f0d87f2abce4b6b3d40.js
├── manifest.1f0d87f2abce4b6b3d40.js.map
├── vendor.6e85d686677580e84eb8.js
└── vendor.6e85d686677580e84eb8.js.map

  当将这个文件放在根目录下的时候,build出来的项目里不会含有favicon.ico文件。

  从static的字面意思来讲,静态的,除了文件的静态性,还包含有文件路径的静态性。build前后index.html都有同级目录的static文件夹,因此build前后引用的路径不会发生改变。个人猜测跟webpack的打包方式有关,它会去拷贝一个static文件夹,然后在往里面添加打包后的文件(不知这样理解的是否正确)。

2、nginx配置

  Nginx的error日志中会定期抱怨说没有找到favicon.ico文件?发生这种错误的原因一般是Nginx在根目录上找不到这个文件。我们可以在网上下载一个ico文件放在根目录下面就可以了。

  但是现在的业务场景有些区别:我使用Nginx作为前台服务器,在80端口接收所有的http请求,对本地能缓存的资源直接提供服务,否则转发到upstream上的其他服务器处理,比如转给fastDFS,或者是ATS等等。

  我现在在根目录下存放一个ico文件,如何让Nginx直接去本地拿这个文件,而不转发给其他服务器呢?直接在nginx.conf中增加下面一行就可以了:

    # set site favicon
location /favicon.ico {
root html;
}

  这样就可以正常看到ico图标了。