vue中遇到的一些小問題之二——新增title中的小圖示
阿新 • • 發佈:2019-02-01
- 需要解決的問題:採用的vue-cli框架,新人半路接到專案,原先title的圖示已經刪掉,需要重新新增一個title圖示
網上的例子都是一些官方的什麼替換啊,配置總之是對的,但是不是很全面。 - 解決方案
首先兩個配置檔案;
webpack.prod.conf.js 這個檔案中:引入程式碼const path = require('path') ;下面是進行配置:
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
favicon: path.resolve('./logo.ico'),
inject: true,
}),
webpack.prod.dev.js這個檔案中:引入程式碼:const path = require('path') ; 下面是進行配置:
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: path.resolve('./logo.ico'),
inject: true,
}),
最後很關鍵的index.html中的程式碼引入:<link rel="shortcut icon" type="image/x-icon" href="./logo.ico" rel="external nofollow" />
最後最最最關鍵的一點:圖片的位置和圖片的格式:
如果這張引入還不行的,可以試著這樣再引入一張:
最後前端圖片格式轉換成ico格式的連結:位元蟲轉ico格式的網站
最後一點:更新完檔案記得重啟一下專案。