如何配置Vite.js输出不带哈希的main.js文件

你需要同时配置入口文件、代码分割chunk、静态资源的文件名规则，只修改assetFileNames只会影响图片、CSS这类资源，JS入口文件依然会带哈希后缀。调整你的Vite配置如下：

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig(({ command, mode }) => {
  const envMode = mode === 'development' ? 'development' : 'production';
  const env = loadEnv(envMode, process.cwd(), mode === 'development' ? '.env' : '.env.prod');

  return {
    root: '.',
    plugins: [react()],
    build: {
      outDir: 'static',
      rollupOptions: {
        output: {
          // 配置入口JS文件名（如main.js）
          entryFileNames: 'assets/[name].js',
          // 配置代码分割生成的chunk文件名
          chunkFileNames: 'assets/[name].js',
          // 配置静态资源文件名（CSS、图片、字体等）
          assetFileNames: 'assets/[name].[ext]'
        }
      },
    },
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

额外提醒 #

• 配置完成后，build输出的所有文件都会使用原始文件名，无任何哈希后缀，你可以在Django模板里直接写固定路径引用，比如<script src="{% static 'assets/main.js' %}"></script>。
• 生产环境需注意浏览器缓存问题：每次更新代码后，要么手动清理用户浏览器缓存，要么在Django静态资源配置中添加缓存破击策略（比如给静态资源URL追加版本参数），避免用户加载旧的缓存文件。

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