How to set a custom output name for script with vite build

Question

Instead of getting the default output js file like index.abc123.js from vite build, I want to tell it what to name the output file. But I'm not sure how to do that. Here's my current 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', 
    }
})

Update: It took quite a bit of fiddling around to figure out what would work for our folder structure, but I finally found out how to do what I was looking for. Here's our final vite.config.js and packages.json Hopefully it helps someone else.

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: {
                assetFileNames: 'client/rsc/[ext]/[name][extname]',
                chunkFileNames: 'client/rsc/[chunks]/[name].[hash].js',
                entryFileNames: 'client/rsc/js/client.js'
            }
        }
    }
}));

packages.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"
  }
}

You need to modify build options, the answer is here: https://stackoverflow.com/questions/69614671/vite-without-hash-in-filename — elVengador, May 01 '23 at 23:02
Please post your solution as an answer instead of editing the question :) — Darryl Noakes, Jun 21 '23 at 23:29

Smit Patel · Answer 1 · 2023-06-21T23:21:42.970

To achieve this, you need to make changes in two files:

vite.config.ts | js
package.json

vite.config.ts (File) :

const isP = process.env.NODE_ENV === 'production';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    {
      name: 'rus-dist-cleanup',
      closeBundle: isP
        ? async () => {
            // Remove hash from assets
            const fs = require('fs');
            const path = require('path');
            const dir = path.resolve(__dirname, 'dist/assets');
            const files = fs.readdirSync(dir);
            files.forEach((file: string) => {
              // Remove hash from file name
              const newFile = file.replace(/-[a-z0-9]{8}\./, '.');
              fs.renameSync(path.resolve(dir, file), path.resolve(dir, newFile));
            });
          }
        : undefined,
    },
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  ...(isP
    ? {}
    : {
        build: {
          outDir: 'dist',
          emptyOutDir: true,
          minify: true,
          watch: {
            include: 'src/**',
            exclude: 'node_modules/**, .git/**, dist/**, .vscode/**',
          },
          assetsDir: 'assets',
          cssCodeSplit: false,
          sourcemap: false,
          ssr: false,
          rollupOptions: {
            treeshake: true,
            output: {
              entryFileNames: `assets/index.js`,
              chunkFileNames: `assets/index-chunk.js`,
              assetFileNames: `assets/[name].[ext]`,
            },
          },
        },
      }),
});

package.json (File) :

"scripts": {
    "w": "vite build --watch",
    "dev": "vite",
    "build": "prettier --write src/ && run-p type-check build-only && ./move_dist.sh",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
},

yarn w or npm run w to start the build watch process.

How to set a custom output name for script with vite build

1 Answers1

To achieve this, you need to make changes in two files: