ViteJS 清单文件中带有哈希值的常量资产文件名

Question

我需要将 JS/CSS 文件与 ViteJS 捆绑在一起。生成的文件名必须是常量，但我需要清单文件中这些文件的哈希值。

示例文件夹结构：

/public/build/js/app.js
/public/build/css/app.css
/public/build/.vite/manifest.json

manifest.json 内容示例：

{
   "/js/app.js": "/js/app.js?id=3a21c6f9face25230336",
   "/css/app.css": "/css/app.css?id=04dde085bbd4f32a4349"
}

如何在 vite.config.js 中进行配置？

我试过了：

export default defineConfig({
   build: {
       // generate .vite/manifest.json in outDir
       manifest: true,

       outDir: './../../../public/build',

       rollupOptions: {
          output: {
             entryFileNames: `assets/[name].js`,
             chunkFileNames: `assets/[name].js`,
             assetFileNames: `assets/[name].[ext]`
          },
       },
   }
})

这会生成没有哈希值的文件名，但清单文件中也丢失了哈希值。

Answer 1

那么您想要清单中文件名的哈希值，但不需要实际文件的哈希值？一种解决方案是生成带有哈希值的文件，运行一个迭代清单条目的脚本并重命名文件，修剪哈希值。这可能可以作为 vite 插件来完成。

---

如果您希望清单条目和实际文件都具有哈希值，只需将

[hash]

添加到 vite 配置中的这些条目即可：

rollupOptions: {
    output: {
        entryFileNames: `assets/[name]-[hash].js`,
        chunkFileNames: `assets/[name]-[hash].js`,
        assetFileNames: `assets/[name]-[hash].[ext]`
    },
},

Answer 2

您所需要做的就是在文件名模板中添加哈希作为查询参数：

       rollupOptions: {
          output: {
             entryFileNames: 'assets/[name].js?id=[hash]',
             chunkFileNames: 'assets/[name].js?id=[hash]',
             assetFileNames: 'assets/[name].[ext]?id=[hash]'
          },
       }