CODEWITHSUNDEEP
javascriptvue.jsvuejs3vite
Garikai Dzoma
Garikai Dzoma

Reputation: 401

How to set the names of Vite build JS and CSS bundle names in Vue

I am using Vite+Vue3 and JavaScript to build a SPA. The problem is that whenever I run npm run build I after making changes I get a .css and .js with different names that look like they are generated from some hash. I want to have fixed names for both for example code.js and styles.css. I have read the Vite Documentation and cannot seem to find what I am looking for.

I have read the documentation for Vite+Vue and cannot seem to find the answer. I want to be able to specify the resultant file names for Javascript and CSS whenever I run npm run build.

When I run npm build, I get the following files in dist/assets/:

The second part of these names keeps changing whenever I update the up. I want the names to be predictable. For example:

No matter how many times I run npm build.

Is there a Vite config setting that allows me do this?

Upvotes: 9

Views: 18271

Answers (1)

Garikai Dzoma
Garikai Dzoma

Reputation: 401

As it turns out this is not very hard to do at all. The only reason why I couldn't find a solution is because of the terminology used in the bundling world which I was not familiar with. These are part of Vite's RollUp options. All one needs to do is add the following options to vite.config.js

export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
            output: {
                dir: '~/plugin/assets/',
                entryFileNames: 'plugin.js',
                assetFileNames: 'plugin.css',
                chunkFileNames: "chunk.js",
                manualChunks: undefined,
            }
        }
    }
})

This outputs the build bundle into the ~/plugins/assets folder with them having the same names.

Upvotes: 20

Related Questions