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

news/2024/5/9 10:14:09/文章来源:https://blog.csdn.net/m0_71645665/article/details/137049608

工作中肯定会遇到要修改网页的标题title及图标logo

一、固定设置标题方案

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

chainWebpack: config => {// 配置网页标题config.plugin('html').tap((args) => {args[0].title = '标题'return args})
}

这段代码是使用Vue.js框架的配置文件中的一部分。它的作用是修改生成的HTML文件的标题。
config.plugin(‘html’)：通过 config.plugin 访问Webpack的HTML插件。HTML插件用于生成HTML文件，并将打包后的脚本自动注入到HTML中。
tap((args) => {…})：使用 .tap() 方法注册一个回调函数，用于修改HTML插件的选项。
(args) => {…}：回调函数接收一个参数 args，表示HTML插件的选项数组。
args[0].title = ‘标题’：通过修改 args 数组的第一个元素来修改HTML的选项。在这个例子中，我们将 title 属性设置为 ‘标题’，即将生成的HTML文件的标题设置为 ‘标题’。
return args：返回修改后的选项数组，使配置的修改生效。

在这里插入图片描述

public/index.html文件

在这里插入图片描述

方法二：直接在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>