vue.js加入favicon圖示的方法:1.修改【index.html】文件,程式碼為【
本教學操作環境:windows10系統、vue2.9,本文適用於所有品牌的電腦。
【相關文章推薦:vue.js】
vue.js新增favicon圖示的方法:
方法一:修改index.html檔
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>缺點:打包後需要將
favicon.ico
複製到根目錄方法二:修改webpack設定檔
1、找到build下的webpack.dev.conf.js檔
new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: path.resolve('favicon.ico') // 新增 }),2、找到build下的webpack.prod.conf.js檔
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, favicon: path.resolve('favicon.ico'), //新增 minify: { emoveComments: true, collapseWhitespace: true, removeAttributeQuotes: true ... }),方法三:vue專案打包後favicon無法正常顯示
#解決方法:
在webpack.prod.config.js中的HtmlWebpackPlugin外掛選項中設定favicon選項,其中favicon的路徑是個相對路徑
new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', favicon: 'src/assets/img/favicon.ico', inject: true }),修改設定檔後需重新啟動
npm run dev
打包後根目錄下就會有favicon. ico
#相關免費學習推薦:JavaScript(影片)
以上是vue.js中怎麼加入favicon圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!