vue:设置浏览器的上的图标

简介: vue项目设置浏览器上的图标

完成一个vue项目后怎样在浏览器看到自己项目的logo呢
image
一个的vue项目的目录
image

理解每个文件的含义

build中配置了webpack的基本配置、开发环境配置、生产环境配置等
config   //配置目录,包括端口号和路径等
node_modules  //npm加载项目的依赖模块
src  //这里是我们要开发的目录,基本上要做的事情都在这个目录里。
asset  //放置一些所需图片
components  //组件目录,用于放置一些组件
router  //路由文件
App.vue  //项目根组件,可以将组件都写在里面
main.js  //项目的核心配置文件
static  //静态资源目录,如图片、字体等。
static/.gitkeep  //这个文件保证这个文件夹在上传到github的时候会始终存在。因为github本身会忽略掉空文件夹。
.babelrc  // babel语法编译器的编译配置
.editorconfig  //编辑器的配置
.gitignore   //一些不需要上传的文件或者目录
.postcssrc.js   //浏览器的兼容问题的文件
index.html  //项目的入口
package-lock.json   //是在 `npm install`时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
package.json //项目配置文件,这个用于控制项目的依赖。使用npm加载依赖时,会按照这个文件里面描述的各个依赖模块的版本进行查找,先查找node_modules目录下是否已存在某个依赖,若不存在再去网络下载,若存在则跳过,但是不会查找本地缓存中已经下载好的。README.md   //项目的描述文件

当项目完成后还有一个dist文件,就是文件打包后最终要发布的文件。

图片一类的静态文件包括浏览器上的logo,应该放在这个static文件夹下,这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径,这样就可以访问这些静态文件了。

将favicon.ico的图标文件放到static文件夹内,然后在index.html的head中添加:

保存就可以了(因为有热重载),若没有可以刷新下浏览器,这样浏览器图标就可以看到了。

目录
相关文章
|
5天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题
|
12天前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
12天前
|
JavaScript 前端开发
[译] 复用 Vue 组件的 6 层手段
[译] 复用 Vue 组件的 6 层手段
|
13天前
|
JavaScript 开发者
vue学习之响应式数据绑定
响应式数据绑定
24 0
|
12天前
|
JavaScript API
vue 批量自动引入并注册组件或路由
vue 批量自动引入并注册组件或路由
|
12天前
|
缓存 监控 JavaScript
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
该文章是《vue从安装到熟练 2022流畅无痛版》系列的第一季入门篇,介绍了Vue的基本概念、环境配置、项目创建与运行,并通过修改HelloWorld.vue和App.vue文件内容展示了如何在页面上显示"Hello World",最后还提供了Vue官方文档链接和介绍了Vue的常用内置指令和模板语法等基础知识。
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
|
4天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
37 11
|
8天前
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
|
3天前
|
JavaScript 前端开发 搜索推荐
推荐5款免费、开箱即用的Vue后台管理系统模板
推荐5款免费、开箱即用的Vue后台管理系统模板
|
5天前
|
缓存 JavaScript 前端开发
vue中使用keep-alive的问题
vue中使用keep-alive的问题
下一篇
DDNS