Today I learned that you can make the build javascript and css files into a custom name. To do this follow these steps:

  1. Open vite.configs.js
  2. add the following property to defineConfig
      build: {
        rollupOptions: {
          output: {
            entryFileNames: `assets/[name].js`,
            chunkFileNames: `assets/[name].js`,
            assetFileNames: `assets/[name].[ext]`
          }
        }
      }
  3. run command:
    $ npm run build
  4. Look inside the dist/ folder you will find two files
  5. index.js
  6. index.css

My example:
Source: /f/laragon/www/forums-react/frontEnd

// https://stackoverflow.com/a/71618444
// https://vitejs.dev/config/
export default defineConfig({
  //server: { https: true,host: true  },
  plugins: [
    react()
   // ,basicSsl()
  ],
  base: '/',
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  }
})

 

Done, I hope this works for you

Resources:

  • https://stackoverflow.com/questions/74760141/how-to-set-the-names-of-vite-build-js-and-css-bundle-names-in-vue
  • https://github.com/vitejs/vite/issues/378
  • https://vitejs.dev/guide/static-deploy.html