vue3.0如何修改瀏覽器標題(靜態(tài))
更新時間:2022年09月10日 09:42:39 作者:唐文軍
這篇文章主要介紹了vue3.0如何修改瀏覽器標題(靜態(tài)),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vue3.0修改瀏覽器標題
新建vue項目的時候它的標題默認拿項目名稱… 大多數時候這是不對的.
<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標簽內容就好了
不過自己玩的時候會這樣寫… 哈哈
一般來說要上線或者說企業(yè)級項目都是放在后臺的配置文件里面。 因為打包部署在服務器上 配置文件不會被打包進去,到時候要換瀏覽器圖片直接換就ok了.
vue項目設置瀏覽器上方的項目標題和圖標(注意圖標放置位置)
1.設置自定義圖標注意點
項目根目錄的index.html,進行設置:【注】
設置自定義的圖標,需要把自己的的圖片放在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.展示效果
修改成功
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue Transition實現類原生組件跳轉過渡動畫的示例
本篇文章主要介紹了Vue Transition實現類原生組件跳轉過渡動畫的示例,具有一定的參考價值,有興趣的可以了解一下2017-08-08vue對象添加屬性(key:value)、顯示和刪除屬性方式
這篇文章主要介紹了vue對象添加屬性(key:value)、顯示和刪除屬性方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07