Vite构建的vue3项目修改网站标题和图标

已于 2023-07-27 16:08:48 修改
阅读量7.8k 收藏 12
点赞数 11
文章标签： javascript 前端 vite vue.js
于 2023-07-27 15:22:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60155232/article/details/131960784
版权
文章介绍了如何准备.ico格式的图片，推荐使用文件转换器进行转换。接着详细说明了在index.html中修改网站标题和设置图标的方法，对于网站图标，需通过更新<link>标签的href属性来实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.准备一张.ico后缀的图片，这里推荐文件转换器，可以将常见的图片格式转为.ico格式图片。 

2.修改网站标题和图标

网站的标题和图标都可以在项目根路径下的index.html下修改。

2.1 网站标题修改<title>标签体内容即可。

2.2 网站图标修改如图<link>标签，引用好href的地址即可。

<link rel="icon"  href="/public/falvfagui1.ico">

  效果： 

  

Vue3 - 超详细动态修改网页标题教程，每次切换页面时自动设置浏览器标题，动态修改页面的 title 浏览器页签名称（用路由表中 meta 某一属性做页面标题并动态改变）
王二红
09-09 9586
vue3动态网页标题，vue3动态修改网页标题，vue3如何监听路由跳转并改变页面的标题，vue3动态修改浏览器标签名称，vue3动态修改页面的title，Vue3.x设置浏览器动态标题title详细教程，vue3实现路由跳转时更改页面title，vue3网站单页面应用中动态修改title方法，vue3通过路由来实现切换头部标题功能，vue3动态修改浏览器标签名称，vue3路由跳转时动态修改标题，vue3如何利用路由表router的meta中的属性设置网页标题，Vue3项目中怎么动态修改页面标题title，
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 2363
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
如何更改vue项目窗口的标题title和图标icon
weixin_43923808的博客
07-19 1306
【代码】如何更改vue项目窗口的标题title和图标icon。
vue项目中如何修改网页地址栏中小图标和文字
最新发布
Web_Notes的博客
04-17 227
就完成了，如果没更新可以重启项目试试。1.打开index.html文件。link引入的就是logo。生成的图标放在pulic下。title就是网站图标。
vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标
浩星
01-10 2879
vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标
vue3 vite title 页面标题设置
m0_55333789的博客
05-28 1826
vue3 vite title 页面标题设置
VUE3 项目自定义修改网页标题和图标
热门推荐
u014328243的博客
07-15 1万+
VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。 1 标题修改 标题修改直接在项目的 /public/index.html中修改title标签即可。 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
vue项目网页图标修改
qq_53911056的博客
12-26 1251
在Vue项目中修改网页图标（favicon）是一个相对简单的过程。将你的图标文件放入public文件夹中，在替换掉index.html里面的原图标就可以了。
【Vue3】动态修改标签名 title
alikami的博客
01-22 2481
Vue 动态修改标签名 title
vite构建的纯净项目可以用于基础项目构建，简单可用，vue项目脚手架vite
03-23
标题中的“纯净项目”意味着这个项目没有预装任何特定的业务逻辑或UI框架，只包含构建Vue应用的基础结构，适合初学者或有经验的开发者用来作为新项目的起点。这个项目已经配置好了Vite和Vue.js，你可以直接进行开发...
小兔鲜电商项目（Vite + Vue3）-vue3-rabbit.zip
11-04
"小兔鲜电商项目"是利用现代前端技术栈Vite和Vue3构建的一个示例项目，旨在展示如何高效地开发一个功能完善的电商应用。Vite是由Vue.js创始人尤雨溪开发的新型前端构建工具，它引入了模块热更新、按需编译等特性，极...
vue3+vite 组件打包
04-16
Vue3 和 Vite 的组件打包是一项关键的前端开发任务，它涉及到现代Web应用程序的构建流程。Vue3 是 Vue.js 框架的最新版本，带来了许多性能优化和新特性，如Composition API，而 Vite 是由 Vue.js 作者尤雨溪开发的...
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3330
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
vue项目如何更换网页图标
weixin_56733569的博客
04-23 2169
vue2的图标文件在public文件夹下，是.ico后缀的文件，我们只需要把新的图标放到这个文件夹下，并改成同名的，然后将旧的删掉，就能替换了。把svg图的代码复制过来，将原本的vite.svg文件里面的代码替换掉就可以啦。vue3的图标也在public文件夹下，但是它是一个.svg后缀的图标。
vue项目改图标_VUE3 项目自定义修改网页标题和图标
weixin_39526546的博客
12-19 1508
VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。1 标题修改标题修改直接在项目的 /public/index.html中修改title标签即可。明月网址导航2 图标修改这个修改相对来说，需要以下几个步骤。1)首先做一个ico的小图标，命名为 favicon.ico 放在 /pu...
修改Vue项目网页标题、图标
qq_26593271的博客
03-03 1013
修改Vue项目网页标题、图标
vue-element-admin更改网页标题和图标
zmy9forever的博客
07-25 1985
这句话中的defaultSettings是从settings文件导入的，然后选中defaultSettings，再按F12键来到。页面中有句const title = defaultSettings.title || 'hello world'选中 getPageTitle 按F12键转到定义，来到了。看到下面的title，更改即可。这句话就是获取页面标题，
vue3修改系统的title标题
我只是个很菜的前端
09-13 1505
vue3修改系统的title标题
怎么修改vue3Vite+Vue的名字和图标
11-28
在创建Vite项目并且基于Vue.js 3.x时，你可以通过修改项目的配置文件来自定义应用名称（name）和图标（icon）。这里使用官方提供的vue和 vite CLI工具来说明。 首先，在项目根目录，你应该有一个`.vite/`目录，其中包含了默认构建配置。其中一个关键配置文件是`vite.config.ts`。 修改名字（name）: 要在启动命令中显示的名字，可以在 `configTS` 中找到 `"title"` 的设置，例如： ```typescript import { defineConfig } from &#39;vite&#39;; export default defineConfig({ title: "MyAwesomeApp", // 修改为你想要的新名字 }); ``` 若你希望全局更改应用程序名称，如HTML头部或元信息，你可以使用 Vuetify 或者 Element Plus 的配置： - Vuetify: ```javascript import Vuetify from &#39;vuetify&#39;; const app = new Vuetify({ app: { name: "YourAppName" // 这里设置全局的Vuetify App name } }); ``` - ElementPlus: ```jsx <ElApp> ... <script setup> Vue.use(ElementPlus).use(ElementConfig, { name: &#39;YourAppName&#39;}); </script> ... </ElApp> ``` 图标修改: 修改图标通常涉及到在入口的HTML中添加 `<head>` 标签内的`<meta>`元素。如果你在模板直接编译HTML，可以这么做： ```html <meta name="app-name" content="My Awesome App Icon"> ``` 如果是在使用预构建的HTML，可以在`vite.config.ts`的公共路径里调整，具体取决于Vite构建选项： ```typescript // vite.config.ts 或 build/vite.config.ts 如果存在 import { DefineOptions } from "vite"; interface GlobalMetadata extends DefineOptions["global"] { icon: string; } const appGlobalMeta: GlobalMetadata = { icons: { ios: "/path/to/icon.png", // 添加 iOS 图标，对于Vite使用动态路径可能需替换为你的真实图标地址 android: "@ionic/icon(ic_account_circle)", // Android 图标，根据实际插件或组件命名，可能需要导入特定图标库 }, }; export default ({ vite }) => { return { ...vite, publicDir: vite.publicPath, build: { outDir: vite.base || ".", }, global: { ssr: false }, metadata: { title: "YourAppName", ...appGlobalMeta, // 添加图标设置 }, }; }; ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mao.O

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值