vue项目设置浏览器标题title及图标

一、固定设置标题方案

方法一：在vue.config.js文件，添加如下代码：

chainWebpack: config => {config.plugin('html').tap(args => {args[0].title = '标题';return args;)
}

方法二：直接在public/index.html中修改title即可，如下：

<!DOCTYPE html>
<html lang="en"><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><body></body>
</html>

二、动态设置标题方案

方法一：通过路由导航守卫设置，使用Vue-Router的beforeEach拦截

/* 第一步：在router中的index.js路由下设置mate属性*/
routes: [{path: '/',name: 'home',component: () => import('@/pages/home/index'),meta:{keepAlive: true}},{path: '/person/auth,name: 'personAuth',component: () => import('@/pages/person/auth),meta:{title: '功能授权',keepAlive: false}}]/* 第二步：在路由守卫router.beforeEach中设置如下代码 */
router.beforeEach((to, from, next) => {/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title}
})

方法二：使用插件vue-wechat-title来设置浏览器动态标题

/* 第一步：安装插件 */
npm vue-wechat-title --save/* 第二步:在全局main.js引入、使用该插件 */
import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件
Vue.use(VueWechatTitle);/* 第三步：在router中的index.js路由下设置mate属性 */
const routes = [{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),meta:{title:'关于'}},{path: '/test',name: 'Test',component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),meta:{title:'测试'}},
]/* 第四步：我们在APP.vue使用vue-wechat-title插件 */
<router-view v-wechat-title="$route.meta.title"/>

三、图标修改

1、首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面，替换原有的 favicon.ico，需要可以备份原有的 favicon.ico。
2、在 /public/index.html/里验证，是否引用了 favicon.ico 图标名称。

<!DOCTYPE html>
<html lang="en"><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><body></body>
</html>

3、重启项目即可。

vue项目设置浏览器标题title及图标相关推荐

vue项目设置浏览器标题title
VUE2: 一.固定设置标题方案方法一,在vue.config.js文件添加如下代码: chainWebpack: config => {config.plugin('html').tap( ...
Vue 中设置浏览器的 title 跟随路由的名称变化
Vue 中设置浏览器的 title 跟随路由的名称变化浏览器title的变化会根据路由的变化而改变可以先设置一个公共的文件夹setting, 用于存放公共的名称, 例如这里的 `小火车况且况且 m ...
vue中修改浏览器标签栏title和图标
vue中修改浏览器标签栏title和图标一.修改文字在项目中的index.html文件title标签中直接写二.修改标签栏图片 1.在项目中的static文件中放入一张图片 2.在index.h ...
vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上方法一.使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...
vue项目设置浏览器icon图标
1. 引入图标在vue项目中的index.html中引入图标,为防止项目打包时图片路径出错,需把icon图标放在static静态文件夹下 <link rel="shortcut ic ...
vue项目中配置标题栏title的图标和文字
一.普通 HTML 页面,配置图标和文字 <head><title>标题栏文字</title><link rel="icon" href= ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
HTML：如何设置网页标题上的图标
hello,大家好,我是wangzirui32,今天我们来学习如何设置网页标题上的图标,开始学习吧! 其实很简单,先准备一个ico图标文件,再使用link标签即可,代码如下: <!DOCTYPE ...
若依框架更改浏览器的title和图标
若依框架更改浏览器的title和图标 1.实现效果 2.实现过程 2.1改变图标 2.2改变title 1.实现效果可以看到title是改变了的,图标偷懒就没有换 2.实现过程 2.1改变图标打开 ...

vue项目设置浏览器标题title及图标

一、固定设置标题方案

二、动态设置标题方案

三、图标修改

vue项目设置浏览器标题title及图标相关推荐

最新文章

热门文章