记一次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')去掉即可

相关推荐
清风絮柳28 分钟前
52.个人健康管理系统小程序(基于springboot&vue)
vue.js·spring boot·毕业设计·前后端分离·健康管理系统·个人健康管理系统·个人健康管理小程序
6武71 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
goto_w1 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
samuel9182 小时前
axios取消重复请求
前端·javascript·vue.js
苹果酱05672 小时前
Golang标准库——runtime
java·vue.js·spring boot·mysql·课程设计
滿2 小时前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
....4925 小时前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
花花鱼7 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
清风ai明月17 小时前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿17 小时前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js