如何修改Vite-Vue项目的vite.config.ts使构建产物文件名含.min后缀？

要实现构建后的JS和CSS文件名自动添加.min后缀，你需要在vite.config.ts的build.output配置中自定义输出文件名规则，具体修改如下：

修改后的完整vite.config.ts代码：

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

export default defineConfig({
  build: {
    sourcemap: true,
    // 自定义输出文件命名规则
    output: {
      filename: '[name]-[hash].min.js',
      chunkFilename: '[name]-[hash].min.js',
      cssFilename: '[name]-[hash].min.css'
    }
  },
  css: { devSourcemap: true },
  plugins: [vue()],
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],
  },
})

关键配置说明： #

• filename：控制入口JS文件的输出命名，[name]对应入口文件名（默认是main），[hash]是内容哈希值，最终生成带.min.js后缀的文件。
• chunkFilename：针对代码分割产生的非入口chunk文件设置命名规则，同样添加.min.js后缀，适配异步组件或代码拆分场景。
• cssFilename：指定提取后的独立CSS文件的命名格式，实现.min.css后缀的需求。

修改完成后执行vite build，dist目录下会生成类似main-xxxxxx.min.js和main-xxxxxx.min.css的文件，且会自动与dist/index.html正确关联。

内容的提问来源于stack exchange，提问作者Lakshan Dissanayake