如何配置Vite为Vue3 SPA生成固定命名的JS/CSS打包文件

要实现打包后生成固定名称的文件，只需修改项目根目录下的vite.config.js配置文件，调整build选项中的输出命名规则即可：

具体配置代码 #

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        // 主入口JS文件命名
        entryFileNames: 'assets/index.code.js',
        // 代码分割生成的chunk文件命名（若无代码分割可省略）
        chunkFileNames: 'assets/index.code.js',
        // 静态资源（如CSS、图片等）命名，[ext]保留原文件后缀
        assetFileNames: 'assets/index.styles.[ext]'
      }
    }
  }
})

配置项说明 #

• entryFileNames：指定主入口JS文件的输出路径和名称，替换默认带哈希的命名规则。
• chunkFileNames：针对代码分割生成的额外JS chunk设置命名，若你的SPA没有做代码分割，此配置可省略。
• assetFileNames：处理CSS、字体、图片等静态资源的命名，[ext]会自动保留原文件的后缀（比如CSS文件会生成index.styles.css）。如果确实需要将CSS文件后缀改为.js（不推荐，不符合文件规范），可直接写assets/index.styles.js。

验证效果 #

配置完成后执行npm run build，即可看到dist/assets/目录下生成固定名称的index.code.js和index.styles.css（或你指定的后缀）。

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