1. vue 프로젝트에서 브라우저 제목 변경
방법 1: vue.config.js 파일에서 다음 코드를 추가합니다.
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].title = '标题';
return args;
)
}방법 2: 다음과 같이 public/index.html에서 직접 제목을 수정합니다.
<!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>2. vue 프로젝트에서 브라우저 아이콘 변경
1. 먼저 작은 ico 아이콘을 만들고 이름을 favicon.ico로 지정하고 /public/ 아래에 배치하여 원본 favicon.ico를 대체합니다. 원본 favicon.ico를 백업해야 합니다.
2. favicon.ico 아이콘 이름이 참조되는지 여부를 /public/index.html/에서 확인합니다.
3. 프로젝트에서 브라우저 제목을 동적으로 제어
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
}
})