vue项目在浏览器地址栏设置图标
在vue項(xiàng)目中,我們怎樣設(shè)置瀏覽器tab圖標(biāo)?如圖
1. 我們來看vue項(xiàng)目的目錄結(jié)構(gòu),根目錄下有一個(gè)index.html,這個(gè)就相當(dāng)于我們普通項(xiàng)目中的各個(gè)html頁面文件,所以設(shè)置方法就是在index.html的head標(biāo)簽中添加link標(biāo)簽。
在這里要注意的是圖標(biāo)文件的位置,不能放到src里,這樣的路徑會讓瀏覽器找不到。網(wǎng)頁把根域名作為相對路徑的根目錄了,然而我們文件的路徑是相對于項(xiàng)目文件的根目錄的,因此就找不到了。
因此,圖片一類的靜態(tài)文件,應(yīng)該放在這個(gè)static文件夾下,這個(gè)文件夾下的文件(夾)會按照原本的結(jié)構(gòu)放在網(wǎng)站根目錄下。這時(shí)我們再去使用/static絕對路徑,這樣就可以訪問這些靜態(tài)文件了。所以推薦將項(xiàng)目中的靜態(tài)文件放到static文件夾下。
將favicon.ico的圖標(biāo)文件放到static文件夾內(nèi),在index.html的head中添加:
<link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.ico"/>
保存并刷新瀏覽器,看瀏覽器圖標(biāo)已經(jīng)正確設(shè)置上了。設(shè)置后圖標(biāo)在測試環(huán)境、生產(chǎn)環(huán)境(打包后)都正常顯示。
2.??注意,此處有坑,下面為測試環(huán)境有效,生產(chǎn)環(huán)境不生效配置,因?yàn)榇虬竽夸涀兞?#xff0c;找不到src里面的路徑了!!!
在build文件夾
找到webpack.dev.conf.js,再找到HtmlWebpackPlugin,添加favicon:‘favicon.ico路徑’,
然后找到webpack.prod.conf.js,再找到HtmlWebpackPlugin,添加favicon:‘favicon.ico路徑’
new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',favicon: './nationalEmblem.png', //這里設(shè)置圖標(biāo)路徑inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference}總結(jié)
以上是生活随笔為你收集整理的vue项目在浏览器地址栏设置图标的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 彩票相关知识
- 下一篇: html5倒计时秒杀怎么做,vue 设