解决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图标了。
相关文章
- import Vue from 'vue';
- 【Vue】项目打包部署到iis服务器中
- 【Vue】单文件的组件(.vue)代码实例
- Vue前端框架Element 的form表单项el-form-item的label中空格不起效和多个空格只显示一个的问题解决
- 初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化
- Vue vue-awesome-swiper 的坑
- 带你深入了解一下vue.js中的this.$nextTick!
- 「Vue.js」Vue-Router + Webpack 路由懒加载实现
- Vue组件的封装
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- Vue 国际化之 vue-i18n 的使用
- Vue--名称案例,监听键盘事件@keyup--实时获取数据-----watch属性方法获取
- VUE-009-页面打开时初始化配置项内容
- vue学习笔记十:Vue中引入jquery
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- vue文档摘录九:Vue Router
- 动手实现一个vue中的模态对话框组件
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- Vue3实践指南:Prettier代码格式化工具、格式化Vue出现单引号变双引号及分号问题、useRouter执行后undefined问题、Property 'value' does not exist on type 'HTMLElement'、error Unexpected mutation of “xxxx“ prop
- Vue脚手架(vue-cli)搭建和目录结构详解
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- Web 前端 之 Vue vue cli 环境的搭建简单整理(简单的一些注意事项)
- vue-解决Vue打包上线之后部分CSS不生效的问题
- antd design vue 时间选择器设置默认时间
- VUE 父组件和子组件相互传值 组件之间的数据传递
- vue component动态组件
- webpack+vue起步