vue3中如何强制vite清空缓存

Question

我有一个副项目，Vue.js 3 和 vite 作为我的打包工具。

每次构建后，捆绑文件都从之前的构建中获得相同的哈希值，例如：

index.432c7f2f.js   <-- the hash will be identical after each new build
index.877e2b8d.css
vendor.67f46a28.js

所以在每次新构建（文件上有相同的散列）之后，我不得不重新加载浏览器以清除缓存并查看我所做的更改。

我在 package.json 中尝试了 forcing a clearing with a different version number，但是：

在Vite/Rollup环境下不起作用，
每次更改后都手动输入新数字没有意义。

问题：

有什么方法可以配置 vite 在新构建后随机创建新的哈希值，或者你知道另一种清除缓存的技巧吗？

Answer 1

我发现 a solution 如何在构建过程中为每个文件添加随机哈希将清除浏览器中的缓存：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { hash } from './src/utils/functions.js'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name]` + hash + `.js`,
        chunkFileNames: `[name]` + hash + `.js`,
        assetFileNames: `[name]` + hash + `.[ext]`
      }
    }
  }
})

// functions.js
export const hash = Math.floor(Math.random() * 90000) + 10000;

输出：

dist/index.html
dist/index87047.css
dist/index87047.js
dist/vendor87047.js

or

dist/index.html
dist/index61047.css
dist/index61047.js
dist/vendor61047.js

...

vue3中如何强制vite清空缓存

how to force vite clearing cache in vue3

caching

bundle

rollup

vuejs3

vite

问题：

输出：