在vue項目中，我們怎樣設置瀏覽器tab圖標？如圖

1. 我們來看vue項目的目錄結構，根目錄下有一個index.html，這個就相當于我們普通項目中的各個html頁面文件，所以設置方法就是在index.html的head標簽中添加link標簽。

在這里要注意的是圖標文件的位置，不能放到src里，這樣的路徑會讓瀏覽器找不到。網頁把根域名作為相對路徑的根目錄了，然而我們文件的路徑是相對于項目文件的根目錄的，因此就找不到了。

因此，圖片一類的靜態文件，應該放在這個static文件夾下，這個文件夾下的文件（夾）會按照原本的結構放在網站根目錄下。這時我們再去使用/static絕對路徑，這樣就可以訪問這些靜態文件了。所以推薦將項目中的靜態文件放到static文件夾下。

將favicon.ico的圖標文件放到static文件夾內，在index.html的head中添加：

<link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.ico"/>

保存并刷新瀏覽器，看瀏覽器圖標已經正確設置上了。設置后圖標在測試環境、生產環境(打包后)都正常顯示。

2.??注意，此處有坑，下面為測試環境有效，生產環境不生效配置，因為打包后目錄變了，找不到src里面的路徑了！！！

在build文件夾
找到webpack.dev.conf.js，再找到HtmlWebpackPlugin，添加favicon:‘favicon.ico路徑’,

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

然后找到webpack.prod.conf.js，再找到HtmlWebpackPlugin，添加favicon:‘favicon.ico路徑’

new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',favicon: './nationalEmblem.png', //這里設置圖標路徑inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference}

總結

以上是生活随笔為你收集整理的vue项目在浏览器地址栏设置图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。