记一次favicon.ico的折腾

某项目需要将前端和后台整合在一起 我也不知道为啥要整合 上面有要求就整呗

正常前端npm run build打包后 dist内会根据设置自动生成favicon.ico文件在根目录下

但由于前后端整合 需要打包后将图标放在dist下的static文件夹里

需要的效果 打包后 index.html里

javascript 复制代码
<link rel="shortcut icon" href=./favicon.ico>

默认生成的是在dist根目录下

改成

javascript 复制代码
<link rel="shortcut icon" href=./static/favicon.ico>

尝试自定义favicon打包路径 下载html-loader 分别试了0.55和0.54版本 均会报错 (可能是我本地依赖的原因)

webpack.base.conf.js里的rules 配置 url-loader和html-loader 正常情况下应该能实现换路径了 但我的不知道为啥就一直报错

后来采用 直接打包前在项目里的index.html中指定href=./static/favicon.ico 从static里获取

并且在webpack.prod.conf.js里的

javascript 复制代码
new CopyWebpackPlugin([
      {
        from: './favicon.ico',
        to: ... static的代表变量
      }
    ])
  ],

单独指定一下favicon.ico存放的位置为static下

按上所示修改 会生成两个link标签 一个在staic下 一个在根目录下

将HtmlWebPackPlugin里的favicon:resolve('favicon.ico')去掉即可

相关推荐
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军1 天前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy1 天前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端1 天前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 天前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 天前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 天前
v-model与-sync的演变和融合
前端·javascript·vue.js
xiaoyan20151 天前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation1 天前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
给月亮点灯|1 天前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js