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

　　有多种解决方案

1、vue静态资源

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

link

标签

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

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



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

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

　　然后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图标了。