Vue动态修改index.html中的title和icon图标

最新推荐文章于 2023-11-20 17:29:14 发布
最新推荐文章于 2023-11-20 17:29:14 发布
阅读量3.7k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js javascript
原文链接：https://www.cnblogs.com/chinabin1993/p/8509743.html
版权
meiwan123
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue更改index.html的title
ycc1111的博客
03-23 745
直接document.title = '你想要改成什么样的内容'
聊聊Vue 中 title 的动态修改问题
10-16
主要介绍了 Vue 中 title 的动态修改问题，文中通过两种方案给大家介绍了title的传递问题 ,需要的朋友可以参考下
vue项目中,main.js,App.vue,index.html的调用方法
10-17
今天小编就为大家分享一篇vue项目中,main.js,App.vue,index.html的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中动态设置meta标签和title标签的方法
12-12
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮，所有就需要手动设置meta标签，标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name: 'Article', component: Article, meta: { title: "文章详
vue在index.html中引入静态文件不生效问题及解决方法
10-17
主要介绍了vue在index.html中引入静态文件不生效问题及解决方法，本文给大家分享两种原因分析，通过实例代码讲解的非常详细 ,需要的朋友可以参考下
Vue3 项目修改index.html的 title
最新发布
northcastle的博客
11-20 1100
vue3 项目中修改index.html 中的 title
vue项目设置浏览器标题title及图标
lovecoding1的博客
01-17 7858
vue项目设置浏览器标题title及图标
Vue 动态修改网页标题和图标
林中明月间丶
03-10 5148
VUE2： 二、普通方案，使用Vue-Router的beforeEach拦截 routes: [{ path: '/', name: 'home', component: () => import('@/pages/home/index'), meta:{ keepAlive: true } }, { path: '/person/auth, name: 'personAuth',
【Vue】html调用vue组件实例函数以及动态修改变量的值
cai454692590的博客
05-09 6798
自从用了vue.js之后，习惯了双向绑定后，已经回不去以前的传统的jstl，jquery等模式了。 本博文主要为了解决某些特殊情况下，需要通过调用index.html的全局function，从而达到调用vue组件里面对应的方法，并且能够修改对应vue组件里面变量属性。 特殊情况例如：写个安卓app使用webview组件，然后h5页面是使用vue框架，原生的安卓要调用页面js的方法从而达到某种目的。如果使用传统的html，我们可以写一个全局function，然后安卓那边直接调用这个function就好了。当然
vue-cli打包路径不对以及更改icon图标
qq_44855431的博客
09-14 904
1 在路径下创建vue.config.js 文件。 2 打包后路径不对添加 一下代码即可 publicPath: './', 3 更改标题图标 3.1 vue 的标题图标代码是在 public 文件的index.html 里面 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 3.2 把需要更换的图标改为faicon.ico 替换原来的daicon.ico文件 3.2 在vue.config.js文件里添加以下代码
修改Vue项目网页标题、图标
qq_26593271的博客
03-03 735
修改Vue项目网页标题、图标
【Vue】vue项目网页标题栏ico小图标修改调整
weixin_46368797的博客
05-09 2505
找到index.html文件，将link标签中的图标路径名favicon.ico改成logo.jpg（png格式同理）将logo图片文件复制到public文件夹中。刷新网页，图标更新成功。
Vite构建的vue3项目修改网站标题和图标
maohe的博客
07-27 3329
记录 vite + vue3 + ts 项目修改网站标题和网站图标。
VUE项目打包后，图片新标签页打开，icon为VUE默认icon的修改方式
趁年轻，多学点
07-26 95
VUE项目打包后，图片新标签页打开，icon为VUE默认icon的修改方式。 vue3.x 项目： 项目根目录下的vue.config.js 文件，不存在则新建。添加如下代码： // 图标修改 pwa: { iconPaths: { favicon32: 'favicon.ico', favicon16: 'favicon.ico', appleTouchIcon: 'favicon.ico', maskIcon: 'favi
vue2.0设置网页的ico显示
janessssss的博客
08-14 1584
在做项目的过程中，发现按照之前的方法设置.ico无效 然后发现需要修改build中的配置才可以 1、将你像设置的ico文件放在static目录下，是为了防止打包之后，文件只存在index.html和static而找不到ico文件的情况 2、index.html中设置 <link rel="shortcut icon" href="./static/favicon.ico" type="ima...
vue设置网页title
热门推荐
zluz_的博客
09-25 1万+
最近用vue来做一个项目，到结尾的时候发现一个问题：不管开的是哪个组件的路由地址，网页的title都是index.html里面的title。下面总结一下解决的办法： 原先我使用的是document.title =to.meta.title来改变网页标题。 大家都知道使用Vue框架开发的应用是个单页面应用，里面用到的是路由的形式，并不像多页应用开发那样（下面附带区别）。所以想让网页的标题随着路由的改变而改变可以使用下面这个方法，目前已解决。 第一步：找到 router 文件夹下的index.js文件，在此引
vue cli3 修改生成index.html文件的默认title
追梦小狂魔的博客
04-02 1999
vue.config.js文件 在 module.exports 中加入 pages: { index: { entry: 'src/main.js', title: 'xxx' // 放要改的title名 } }
vue如何动态改变HTML的属性值，以elementUI表单必填项与选填切换为例
商务合作 / 项目定制开发 / 前端一对一培训、答疑
03-06 1295
表单控件需要根据条件动态进行必填项验证，如果用v-if来写，有点繁琐，而且会造成很多重复代码的
设置页面图标和动态title
weixin_41897680的博客
12-02 1173
前言 项目以vue为例 图标 在public目录下，放置一个图片 在index.html里使用下面的代码引入图标 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel
怎么修改vue项目图标和标题
09-16
### 回答1： 要修改 Vue 项目的图标和标题，需要在 Vue 项目的 public 目录下添加 favicon.ico 文件作为图标，并在 index.html 中通过标签修改标题。 具体步骤如下： 1. 在 public 目录下添加图标 favicon.ico 2. 在 index.html 中的 head 标签中修改标题，例如： ``` <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>修改后的标题</title> </head> ``` 修改完成后，重新启动项目即可生效。 ### 回答2： 要修改Vue项目的图标和标题，可以按照以下步骤进行操作： 1. 修改图标：首先需要找到一个想要作为项目图标的图片，并确保其格式是合适的，比如一个.ico或者.png格式的图标文件。接着，将这个文件复制到Vue项目的`public`文件夹中。 2. 在Vue项目的`public`文件夹中找到`index.html`文件，并打开它。在这个文件中，可以找到一个类似下面的代码片段： ```html <link rel="icon" href="<%= BASE_URL %>favicon.ico"> ``` 将`favicon.ico`替换为你在第一步中复制到`public`文件夹中的图标文件名，保存并关闭`index.html`文件。 3. 修改标题：要修改项目的标题，可以在Vue项目的`src`文件夹中找到`main.js`文件，并打开它。在这个文件中，可以找到以下代码片段： ```js new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` 通过在这段代码中的`render`方法中添加一个`head`选项，可以动态地设置项目的标题。例如： ```js new Vue({ router, store, render: h => h(App), head: { title: '你想要的标题' } }).$mount('#app') ``` 保存并关闭`main.js`文件，重启Vue项目，你将会看到新的图标和标题生效了。 这就是修改Vue项目图标和标题的方法。记得在完成修改后，重新启动项目以使更改生效。 ### 回答3： 要修改Vue项目的图标和标题，可以按照以下步骤进行操作： 1. 修改图标：首先，将需要替换的图标文件准备好，通常为.ico或.png格式。然后，在Vue项目的根目录中找到public文件夹，将图标文件放置在该文件夹下。 2. 在public文件夹中找到index.html文件，并打开它。在该文件中，可以找到一个类似于`<link rel="icon" href="<%= BASE_URL %>favicon.ico">`的代码行，其中的favicon.ico就是默认的网页图标。 3. 将默认的图标文件名修改为新图标文件名。例如，如果新的图标文件名为new-icon.ico，那么将代码行修改为`<link rel="icon" href="<%= BASE_URL %>new-icon.ico">`。 4. 保存index.html文件。 5. 修改标题：打开项目的src文件夹，找到main.js文件并打开。在该文件中，可以找到一个类似于`document.title = 'Vue App'`的代码行，其中的'Vue App'即为项目的标题。 6. 将默认的标题修改为新的标题。例如，如果新标题为'New Vue App'，那么将代码行修改为`document.title = 'New Vue App'`。 7. 保存main.js文件。 8. 重新运行Vue项目，可以看到新的图标和标题已经生效。 总结：通过将新的图标文件放置在public文件夹下，并修改index.html文件中的图标文件名，再在main.js文件中修改标题，即可成功修改Vue项目的图标和标题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值