有用冷知识，vue项目打开后，在浏览器顶部显示的文字及图标如何更改

最新推荐文章于 2024-01-10 14:03:45 发布
最新推荐文章于 2024-01-10 14:03:45 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端 vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46872379/article/details/121519121
版权
本文介绍了如何使用VueCLI创建项目，并着重讲解了如何修改index.html文件的title标签内容以及添加图标。建议将静态资源如图片存放在static文件夹下，以避免路径问题。通过简单的配置，可以实现图标在页面上的显示。
摘要由CSDN通过智能技术生成

运用vue cli创建完项目后，找到index.html文件

 编辑title标签内的内容即可。

若要添加图标，添加如下配置

 即可实现如下效果

 ps:图片尽量放到static文件夹下面，若放在src下可能会出现找不到图片的现象

菜方方
关注
专栏目录
vue--修改项目浏览器页面的文字和图片
jieweiwujie的博客
10-17 2063
vue--修改项目浏览器页面的文字和图片
Vue实现在页面上添加返回顶部按钮（按钮固定在页面右下角）
望望byte的博客
07-20 3715
从网站上下载按钮图片： 我在图精灵上下载图片到项目src文件夹下的assets文件夹 并命名为topButton.png 可以用本地的图片编辑软件（如画图）将按钮图片设置为像素50*50 在App.vue文件夹下引入图片 //为click事件设置处理函数（点击回到顶部方法） //v-if（条件渲染），绑定的值btnFlag为true的时候显示该<img>元素，为false则删除 <img id='upbutton' v-if='btnFlag src="../assets/t..
在vue中修改浏览器图标和名字
fackyoufack的博客
08-20 5599
vue中，网页图标默认使用的是vue自带的一个icon的图标，也是vue的logo。下面整理了几种改变浏览器标题和图标的方法
VUE的项目中怎样修改浏览器窗口的 LOGO
abcdebb的博客
05-30 1120
vue项目如何修改上图浏览器的标题栏的图标 在public目录中的index.html添加如下代码 <link rel="icon" href="<%= BASE_URL %>logo.svg"> 注意logo.svg是图片。图片位置在public目录下
在vue项目里设置浏览器顶部的标题
m0_49440146的博客
05-30 414
在vue.config.js文件 添加如下代码： chainWebpack: config => { config.plugin('html') .tap(args => { args[0].title = '标题'; return args; ) } 在重启一下项目就可以了 也不用在去修改index.html文件下的title了 ...
vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标
最新发布
浩星
01-10 2326
vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标
在google浏览器调试vue项目时，怎么在浏览器中直接修改vue的值
06-10
在Google浏览器中调试Vue项目时，你可以使用Vue.js官方提供的Vue.js devtools插件来方便地修改Vue的值。具体步骤如下： 1. 首先，你需要在Chrome Web Store中搜索并安装Vue.js devtools插件。 2. 安装完成后，打开...
vue-devTool编译和安装教程附源代码和编译后的安装包
04-03
- 打开一个Vue.js应用，如果Vue DevTools已经正确安装，你将在Chrome浏览器的右上角看到Vue DevTools图标。点击图标，它会在浏览器的侧面或顶部展开，显示Vue应用的组件树和数据。 6. **使用Vue DevTools** - 在...
vue项目打包后部署到服务器(超详细步骤)
m0_67402914的博客
06-18 2820
耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作vscode下载链接：https://pan.baidu.com/s/1ibHt7XB6EZy37BDb1CigWw 提取码：69r11 , vscode打开你的vue项目 – > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包…稍等一会2 , 打包成功 , 生成了dist文件夹, 打包好的文件存
vue的chome浏览器的开发者工具，可直接安装 解压即用
02-25
Vue.js 的核心库专注于视图层，易于与其他库或现有项目集成，因此在开发单页应用（SPA）和复杂Web应用时非常受欢迎。 Chrome 浏览器的开发者工具是Web开发者的得力助手，提供了丰富的功能，如元素检查、网络请求...
vue3 加载 ElementPlus 只显示文字不显示样式
sinat_29326171的博客
10-20 979
createApp(App).use(ElementPlus).mount(‘#app’)
vue之浏览器title的设置
牛先森家的博客
06-03 1476
vue之浏览器title的设置vue之浏览器title的设置1、新建setting.js文件2、vue.config.js文件中代码3、public中index.html4、document.title 修改title的内容 vue之浏览器title的设置 设置title中的文本，如图： 这里也会展示在public的index.html中使用变量用法； 1、新建setting.js文件 文件里面其他内容可根据实际情况来定； module.exports = { title: '蓝湖', /**
【记录vue+element ui搭建页面为何不显示样式】
daisy_juhua的博客
11-12 1623
vue+element ui搭建页面为何不显示样式
vue 设置页面标题，微信公众号内嵌H5标题顶到顶部
絮落锦乡的博客
05-03 1292
一、安装 npm install vue-meta -S 二、配置main.js import Meta from "vue-meta"; Vue.use(Meta); 三、页面配置 metaInfo: { title: '标题标题标题标题标题标题标题', meta: [ { name: 'description', content: '描述描述描述描述描述描述描述' }, { n
vue项目在谷歌浏览器中莫名被更改了内容和出现font标签
iSmilee的博客
06-07 523
先说明原因：被浏览器翻译了。 事情的经过是这样的：测试的同事突然发现原本内容为“项目进度”的
vue项目中配置标题栏title的图标和文字
weixin_34204057的博客
08-02 3926
一、普通 HTML 页面，配置图标和文字 <head> <title>标题栏文字</title> <link rel="icon" href="../favicon.ico" type="image/x-icon"> </head> 二、vue 项目中，配置图标和文字 1.在网站根目录下的 ind...
**vue-cli4生成项目后修改默认主页的内容**
Zing_ing的博客
04-13 440
vue-cli4生成项目后修改默认主页的内容 原始的默认首页是vue的欢迎界面 接着找到src>views>Home.vue，这个为默认的首页 将其改为 <template> <div class="home"> </div> </template> <script> // @ is an alias to /src export default { name: "Home", components:
如何动态修改Vue项目中的页面title
热门推荐
qq_26780317的博客
06-02 1万+
https://www.jianshu.com/p/7c3f52f640ab https://www.jianshu.com/p/36b47d63cdb1 https://www.cnblogs.com/linxue/p/9647739.html
/** 内容 */、vue文件头部注释
weixin_39418338的博客
08-26 1606
1、/** 内容 */ 一直想知道这注释怎么做到的，今天查阅资料，原来是这么回事 在没有输入注释内容的情况下，输入/** 会自动 /** */中间输入注释的内容，换行会自动在前面带星 /** *open:true浏览器是否自动打开，不写默认false，true自动打开 */ 2、vscode在插件中查询插件koroFileHeader安装 (1)文件-》首选项-》设置 搜索fileheader (2)、在settings.json配置内容 "filehead...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值