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/:

• index.c14cf232.js
• index.a6c8e3b2.css

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

• index.code.js
• index.styles.js

No matter how many times I run npm build.

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

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/:

• index.c14cf232.js
• index.a6c8e3b2.css

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

• index.code.js
• index.styles.js

No matter how many times I run npm build.

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

• javascript
• vue.js
• vuejs3
• vite

• 1 Why do you want to have the same hashes every time? – quippe Commented Dec 11, 2022 at 17:15
• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Dec 12, 2022 at 10:55
• 1 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 Commented Dec 13, 2022 at 3:50

1 Answer 1

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.