Make it possible to use file hashes in query strings instead of file name

Clear and concise description of the problem

In our environment, there’s a specific whitelist for files permitted to be served. At the same time, I’d like to employ hashes to serve the most recent versions of the files.

I’d like to use hashes as query strings (eg. fileX.js?v=87654321) instead of part of the file name (fileX.87654321.js), as that won’t necessitate an update of the whitelist.

Updating the config with eg. build.rollupOptions.output.assetFileNames to assets/[name].[ext]?v=[hash] will just literally append ?v=87654321 to the actual file name.

Suggested solution

Config option (maybe it already exists in some form)

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[rubjo]

@bluwy Thanks for the input!

Absolutely agree with you, although what’s frustrating is that one doesn’t always have complete control over the deployment chain / environment policies.

Anyway, you’re right that this is the domain of a custom plugin, and it was really quite easy to implement once I did a bit more research:

vite.config.js:

// Cache busting: append timestamp as hash
const htmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html) {
      const hash = Date.now()

      return html
        .replaceAll('.js', '.js?v=' + hash)
        .replaceAll('.css', '.css?v=' + hash)
    },
  }
}

…along with

export default defineConfig({
  plugins: [vue(), htmlPlugin()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]',
      },
    },
  },
})

[ryoji-sagara]

Understood. I will comment again when I figure out the implementation. Thanks for the reply.