zoukankan      html  css  js  c++  java
  • 解决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图标了。

  • 相关阅读:
    7月15日考试 题解(链表+状压DP+思维题)
    暑假集训日记
    C# .NET 使用 NPOI 生成 .xlsx 格式 Excel
    JavaSE 基础 第42节 局部内部类
    JavaSE 基础 第41节 匿名内部类
    JavaSE 基础 第40节 内部类概述
    JavaSE 基础 第39节 接口的应用
    JavaSE 基础 第38节 接口的实现
    JavaSE 基础 第37节 接口概述
    JavaSE 基础 第36节 抽象类概述与使用
  • 原文地址:https://www.cnblogs.com/goloving/p/9094537.html
Copyright © 2011-2022 走看看