vue項目如何修改title旁邊的icon圖片
更新時間：2022年12月13日 08:40:15 作者：南獨酌酒nvn
這篇文章主要介紹了vue項目如何修改title旁邊的icon圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue修改title旁邊的icon圖片
找到 public 文件夾下，修改 index.html 頁面
<link rel="icon" type="image/x-icon" href="static/logo.png" rel="external nofollow" >
將你要修改的 logo 圖片放在 static 文件夾下（瀏覽器這里并不認識 src 文件夾），所以放在 statis 文件夾下才能正確找到圖片做替換操作。
修改vue項目的title左邊的logo
1、icon命名為favicon.ico放在項目根目錄；
2、在index.html中寫入：
<link rel="icon" href="./favicon.ico" type="image/x-icon">
3、修改build下面webpack.prod.conf.js和webpack.dev.conf.js：
修改：添加一行favicon: path.resolve('favicon.ico'), // 引入圖片地址
webpack.prod.conf.js：
new HtmlWebpackPlugin({
? ? ? filename: process.env.NODE_ENV === 'testing'
? ? ? ? ? 'index.html'
? ? ? ? : config.build.index,
? ? ? template: 'index.html',
? ? ? favicon: path.resolve('favicon.ico'), // 引入圖片地址
? ? ? inject: true,
? ? ? minify: {
? ? ? ? removeComments: true,
? ? ? ? collapseWhitespace: true,
? ? ? ? removeAttributeQuotes: true
? ? ? ? // more options:
? ? ? ? // https://github.com/kangax/html-minifier#options-quick-reference
? ? ? },
? ? ? // necessary to consistently work with multiple chunks via CommonsChunkPlugin
? ? ? chunksSortMode: 'dependency'
? ? }),webpack.dev.conf.js：（看一下這個文件上面有沒有const path = require('path')）
new HtmlWebpackPlugin({
? ? ? filename: 'index.html',
? ? ? template: 'index.html',
? ? ? inject: true,
? ? ? favicon: path.resolve('favicon.ico'), // 引入圖片地址
? ? }),4、重新運行，重新打包
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue組件間通信方式全面匯總，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
前端的數(shù)據(jù)均是通過接口請求拿到的，而Vue本身不支持ajax請求，那么該怎么解決Vue中的異步請求呢？這兒提供了幾種方法，希望對大家有所幫助2022-05-05
這篇文章主要介紹了如何獲取this.$store.dispatch的返回值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了使用Vuex解決Vue中的身份驗證問題,本文通過文字實例相結(jié)合給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-09-09
vue使用自定義指令實現(xiàn)按鈕權(quán)限展示功能
這篇文章主要介紹了vue中使用自定義指令實現(xiàn)按鈕權(quán)限展示功能，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04
Vue 中如何利用 new Date() 獲取當(dāng)前時間
在 Vue 開發(fā)中，利用 new Date() 方法可以方便地獲取當(dāng)前時間，并通過 Date 對象的方法進行時間格式化和操作。通過本文的介紹，您應(yīng)該對在 Vue 中獲取當(dāng)前時間有了更深入的了解，并了解了一些常見的時間操作方法,需要的朋友可以參考下2023-07-07
Element-ui table中過濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內(nèi)容的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04