在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路徑’,

new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',favicon:'./nationalEmblem.png', //這里設(shè)置圖標(biāo)路徑inject: true})

然后找到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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。