如何为Vite构建的脚本设置自定义输出文件名

问题场景 #

使用Vite构建Vue项目时，默认会生成带随机哈希的输出文件（如index.abc123.js），需要自定义输出文件名及路径。

初始配置 #

最初的vite.config.js：

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

export default defineConfig({
    plugins: [vue()],
    server: {
        watch: {
            usePolling: true
        }
    },
    build: {
        emptyOutDir: true,      
        outDir: '../public', 
        assetsDir: './dist', 
    }
})

实现方案 #

通过配置Vite的rollupOptions.output自定义各类输出文件的命名规则，同时适配不同构建模式的压缩策略。以下是调整后的完整配置：

最终vite.config.js

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

export default defineConfig(({ command, mode }) => ({
    plugins: [vue()],
    server: {
        watch: {
            usePolling: true
        }
    },
    build: {
        emptyOutDir: true,
        outDir: '../public',
        minify: mode === 'development' ? false : 'terser',
        rollupOptions: {
            output: {
                // 静态资源（如css、图片）的输出路径和命名
                assetFileNames: 'client/rsc/[ext]/[name][extname]',
                // 代码分割后的chunk文件命名
                chunkFileNames: 'client/rsc/[chunks]/[name].[hash].js',
                // 入口文件的自定义固定命名
                entryFileNames: 'client/rsc/js/client.js'
            }
        }
    }
}));

配套package.json

{
  "name": "webpp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build --base=/public/",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "vite": "^3.2.0"
  }
}

关键配置说明 #

• entryFileNames：指定入口JS文件的固定路径和名称，彻底替换默认的带哈希命名
• assetFileNames：自定义静态资源的输出目录和命名，移除哈希后缀
• chunkFileNames：代码分割生成的chunk文件保留哈希，兼顾缓存有效性
• minify：根据构建模式动态调整压缩策略，开发模式不压缩，生产模式启用terser压缩

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