Several ways to modify browser icons and names in vue

Preface

In vue, the web page icon uses the icon icon that comes with vue by default, which is also the logo of vue.

Here are some ways to change the title and icon

1. Modify the icon style

01. Use pictures

This method can use pictures, png, jpg, etc.

This is the original icon with the default one under vue\public

<link rel="icon" href="<%= BASE_URL %>" rel="external nofollow" >

First create a static directory under public and introduce it to use it. It must be under public or it will not work.

Modify directly to

<link rel="icon" type="image/x-icon" href="./static/icon/" rel="external nofollow" >

02.Use icons

First, make a small icon of ico, name it and place it under /public/, replace the original one, and delete the VUE picture below /public/img/icons/.

Create a new one under the root directory and add pwa

 = {
    pwa: {
        iconPaths: {
            favicon32: '',
            favicon16: '',
            appleTouchIcon: '',
            maskIcon: '',
            msTileImage: ''
        }
    }
};

2. Modify browser name settings

01. Direct modification

This is what it was just created

<title>
    <%=  %>
</title>

This is the name modified directly

 &lt;title&gt;
    xxBackend management system
  &lt;/title&gt;

02. Dynamically modify the name according to the value transmitted from the backend

First go to axios to request the result, and then modify it

 = 'The value that needs to be set'

03. How to use plugins in vue

001. npm for installation

npm vue-wechat-title --save

002. Global use, introduced in

 import VueWechatTitle from 'vue-wechat-title' //Plugins that can dynamically modify browser title (VueWechatTitle);

003. Set the mate property under route in router

const routes = [
	{
    path: '/about',
    name: 'About',
    component: () =&gt; import(/* webpackChunkName: "about" */ '../views/'),
	meta:{
		title:'about'
	}
  },
  {
    path: '/test',
    name: 'Test',
    component: () =&gt; import(/* webpackChunkName: "test" */ '../views/'),
	meta:{
		title:'test'
	}
  },
]

004. Using vue-wechat-title plugin

<router-view v-wechat-title="$"/>

04. Modify in the route guard

router

const routes = [
	{
    path: '/about',
    name: 'About',
    component: () =&gt; import(/* webpackChunkName: "about" */ '../views/'),
	meta:{
		title:'about'
	}
  },
  {
    path: '/test',
    name: 'Test',
    component: () =&gt; import(/* webpackChunkName: "test" */ '../views/'),
	meta:{
		title:'test'
	}
  },
]

Router Guard

((to, form, next) =&gt; {
    if () {
         = 
    } else {
         = 'Default title' // Write the default title here    }
  	next()
})

Summarize

This is the article about modifying browser icons and names in vue. This is the end. For more related contents of modifying browser icon names in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!