Vue.js 3 + Vite项目构建文件哈希重复问题：如何配置自动生成新哈希或清除缓存？

我之前在Vue 3 + Vite项目里也碰到过一模一样的糟心事——改了代码构建后哈希纹丝不动，每次都要强制清缓存才能看到更新！试了好几种方法，下面给你分享几个亲测有效的解决方案：

1. 先禁用Vite的构建缓存 #

Vite默认会把构建缓存存在node_modules/.vite目录里，有时候缓存会“卡住”，导致即使代码改了，构建时还是复用旧的产物哈希。直接禁用缓存就能解决大部分情况：

方法一：配置文件里禁用 #

修改你的vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    // 禁用构建缓存
    cache: false
  }
})

方法二：构建命令临时禁用 #

不想改配置的话，每次构建时加--no-cache参数：

npm run build -- --no-cache

2. 确保哈希是基于文件内容生成的 #

Vite默认用contenthash（基于文件内容的哈希），但如果你的配置里不小心覆盖了文件名规则，可能会导致哈希固定。检查vite.config.js的rollupOptions，确保输出文件名用的是contenthash：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 明确指定用contenthash，确保文件内容变了哈希就变
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].js'
      }
    }
  }
})

3. 给静态资源加时间戳参数（终极兜底方案） #

如果上面的方法都不管用，可以给所有静态资源的URL加个随机时间戳，让浏览器认为是全新的资源。用Vite的自定义插件就能自动实现：

修改vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'add-timestamp',
      transformIndexHtml(html) {
        // 生成当前时间戳作为版本参数
        const timestamp = Date.now();
        // 给所有link和script的URL加上?v=时间戳
        return html.replace(/(<link rel="stylesheet".*href="|<script.*src=")/g, `$1?v=${timestamp}`);
      }
    }
  ]
})

这个方法不管哈希有没有变，都会让浏览器重新请求资源，彻底解决缓存问题。

为什么改package.json版本没用？ #

你之前试的改版本号方法失效，是因为Vite默认不会把package.json的版本信息关联到构建产物里——除非你手动把版本注入到代码或HTML中，否则改版本号不会影响哈希值，自然也清不了缓存。

内容的提问来源于stack exchange，提问作者wittgenstein