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

Question

I am using Vite+Vue3 and JavaScript to build a SPA.

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

index.c14cf232.js
index.a6c8e3b2.css

As can be seen the names include a hash.

I want the names to be the same always. For example:

index.code.js
index.styles.js

How do we configure vite to produce fixed file names for Javascript and CSS bundles?

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Dec 12, 2022 at 10:55
I want to have the same file names every time because I am using the apps in my WordPress plugin. The Vue files will be enqueued using PHP based on file names. — Garikai Dzoma
– Garikai Dzoma, Commented Dec 13, 2022 at 3:50

Garikai Dzoma · Accepted Answer · 2022-12-15 11:51:56Z

23

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.

answered Dec 15, 2022 at 11:51

Garikai Dzoma

4811 gold badge3 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabien Snauwaert Over a year ago

Beware this will produce near-duplicate filenames and build/output any .svg file as .css. e.g. vue.svg and tailwind-source.css became respectively plugin.css plugin2.css. Here's a useful answer to make things more dynamic.

Tom Over a year ago

This is the best answer I've found: stackoverflow.com/questions/69614671/…

bronze man Over a year ago

It works for small project with only css and js for now. thanks.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related