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中添加:

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

目录
相关文章
|
10月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
346 1
|
11月前
|
Web App开发 缓存 UED
如何设置浏览器的缓存策略?
【10月更文挑战第23天】通过合理地设置浏览器的缓存策略,可以在提高网页性能、减少网络流量的同时,确保用户能够获取到最新的内容,从而提升用户体验和网站的性能优化效果。
893 60
|
11月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
850 1
|
12月前
|
数据可视化 JavaScript 前端开发
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
176 2
|
12月前
|
JavaScript 前端开发
|
12月前
|
JSON JavaScript 前端开发
vue如何更好的解决浏览器兼容问题
vue如何更好的解决浏览器兼容问题
313 1
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
存储
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
126 1
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读