若依框架favicon.ico缓存更新问题解决方案：本地生效但线上未更新

原创已于 2025-11-20 09:38:49 修改 · 367 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #前端框架

于 2025-11-20 09:14:29 首次发布

若依框架专栏收录该内容

3 篇文章

订阅专栏

1. 强制刷新缓存（最简单）

2. 修改 favicon 引用方式（推荐）

兩個環境的圖標不一樣：

本地：綫上：

1. 强制刷新缓存（最简单）

方法一：硬刷新

Windows: Ctrl + F5 或 Ctrl + Shift + R

Mac: Cmd + Shift + R

方法二：清除浏览器缓存

Chrome: 开发者工具 → Network → 勾选 "Disable cache"

或者直接清除浏览器缓存数据

2. 修改 favicon 引用方式（推荐）

在 index.html 或对应的 HTML 模板文件中，给 favicon 链接添加版本号或时间戳：

原来的：

改后：

使用静态：

不会出现语法错误

能够打破浏览器缓存

<link rel="icon" href="/favicon.ico?v=20251120" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico?v=20251120" type="image/x-icon">

或者使用动态时间戳：（我用的這種）

<link rel="icon" href="/favicon.ico?t=<%= new Date().getTime() %>" type="image/x-icon">

Vite 构建环境中：使用了 EJS 模板语法 <%= %>会报错的， Vite 默认不支持这种语法。

建议使用静态版本号，每次更新图标时修改版本号即可。

或者使用环境变量：
<link rel="icon" href="/favicon.ico?v=${__APP_VERSION__}" type="image/x-icon">
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  return {
    define: {
      '__APP_VERSION__': JSON.stringify(process.env.npm_package_version || '1.0.0')
    }
  }
})

3. 部分使用特定配置

检查 vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].favicon = './public/favicon.ico'
      return args
    })
  }
}

4. 部署相关解决

方法一：重新构建部署

# 清除构建缓存
npm run build --no-cache
# 或
yarn build --no-cache

方法二：服务器配置問題

检查服务器文件覆盖情况
确认线上环境的public目录下已成功替换为新版favicon.ico文件，文件权限需正确（通常为644）。

处理CDN或代理缓存
若使用CDN（如阿里云CDN、Cloudflare），需手动刷新缓存或配置缓存规则排除favicon.ico。

某些情况下（如Nginx静态资源缓存），重启服务可立即生效。
在 nginx 或其它 web 服务器中配置 favicon 不缓存：

location = /favicon.ico {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

然後重啓服務。