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 文件夾下(瀏覽器這里并不認(rèn)識 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-router3.0版本中 router.push 不能刷新頁面的問題
這篇文章主要介紹了vue-router3.0版本中 router.push 不能刷新頁面的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05vue實現(xiàn)一個矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實現(xiàn)一個矩形標(biāo)記區(qū)域 rectangle marker的方法,幫助大家實現(xiàn)區(qū)域標(biāo)記功能,感興趣的朋友可以了解下2020-10-10使用vue的v-for生成table并給table加上序號的實例代碼
這篇文章主要介紹了使用vue的v-for生成table并給table加上序號的相關(guān)資料,需要的朋友可以參考下2017-10-10Vue3.2單文件組件setup的語法糖與新特性總結(jié)
ue3上線已經(jīng)很久了,許多小伙伴應(yīng)該都已經(jīng)使用過vue3了,下面這篇文章主要給大家介紹了關(guān)于Vue3.2單文件組件setup的語法糖與新特性總結(jié)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07