如何在Vue中设置Vite构建JS和CSS包名称

Question

我正在使用 Vite+Vue3 和 JavaScript 构建 SPA。问题是，每当我npm run build在进行更改后运行我时，我都会得到具有不同名称的 .css 和 .js ，看起来它们是从某些哈希生成的。我希望有固定的名称，例如 code.js 和 styles.css。我已阅读 Vite 文档，但似乎找不到我要找的内容。

我已经阅读了 Vite+Vue 的文档，但似乎找不到答案。我希望能够在每次运行时指定 Javascript 和 CSS 的结果文件名npm run build。

当我运行时npm build，我得到以下文件dist/assets/：

• index.c14cf232.js
• index.a6c8e3b2.css

每当我更新时，这些名称的第二部分就会不断变化。我希望这些名字是可预测的。例如：

• index.code.js
• index.styles.js

无论我跑多少次npm build。

是否有 Vite 配置设置允许我执行此操作？

Answer 1

事实证明，这并不难做到。我找不到解决方案的唯一原因是我不熟悉捆绑世界中使用的术语。这些是 Vite RollUp 选项的一部分。所需要做的就是将以下选项添加到 vite.config.js

export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
            output: {
                dir: '~/plugin/assets/',
                entryFileNames: 'plugin.js',
                assetFileNames: 'plugin.css',
                chunkFileNames: "chunk.js",
                manualChunks: undefined,
            }
        }
    }
})

这会将构建包输出到 ~/plugins/assets 文件夹中，并且它们具有相同的名称。