vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))
更新時間：2022年09月10日 09:42:39 作者：唐文軍
這篇文章主要介紹了vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3.0修改瀏覽器標(biāo)題
新建vue項目的時候它的標(biāo)題默認(rèn)拿項目名稱… 大多數(shù)時候這是不對的.
<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" rel="external nofollow" >
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
這個時候我們只需要改一下 public 文件夾下的index.html的title標(biāo)簽內(nèi)容就好了
不過自己玩的時候會這樣寫… 哈哈
一般來說要上線或者說企業(yè)級項目都是放在后臺的配置文件里面。 因為打包部署在服務(wù)器上 配置文件不會被打包進(jìn)去，到時候要換瀏覽器圖片直接換就ok了.
vue項目設(shè)置瀏覽器上方的項目標(biāo)題和圖標(biāo)(注意圖標(biāo)放置位置)
1.設(shè)置自定義圖標(biāo)注意點
項目根目錄的index.html，進(jìn)行設(shè)置：【注】
設(shè)置自定義的圖標(biāo)，需要把自己的的圖片放在static目錄下（與src同級目錄，不要放在src目錄下，瀏覽器會找不到）
2.話不多說，直接上代碼
<!DOCTYPE html> <html> ? <head> ? ? <meta charset="utf-8"> ? ? <meta name="viewport" content="width=device-width,initial-scale=1.0"> ? ? <title>XXXX管理平臺</title> ? ? <link rel="icon" type="image/x-icon" href="./static/logo.png" rel="external nofollow" > ? </head> ? <body> ? ? <div id="app"></div> ? ? <!-- built files will be auto injected --> ? </body> </html>
3.展示效果
修改成功
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近發(fā)現(xiàn)很多要求Vue3的技術(shù)了,不得不說it技術(shù)的更新真的太快了,作為vue2老用戶,我們在學(xué)習(xí)Vue3前應(yīng)該了解他們的區(qū)別以及背后的原因,下面這篇文章主要給大家介紹了關(guān)于vue2和vue3區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue+webpack實現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實現(xiàn)異步組件加載的代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
這篇文章主要介紹了Vue.js?前端路由和異步組件介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
本文主要介紹了vue3+ts代理的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過引用并調(diào)用ElQuarterPicker.vue組件來實現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧2024-09-09
使用vue構(gòu)建移動應(yīng)用實戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動應(yīng)用實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Nuxt.js實戰(zhàn)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)下拉框篩選表格數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue中post請求以a=a&b=b 的格式寫遇到的問題,需要的朋友可以參考下2018-04-04
Vue Element前端應(yīng)用開發(fā)之根據(jù)ABP后端接口實現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息，實現(xiàn)對前端界面的開發(fā)工作。2021-05-05