I have 2 entry points to my app, with vite-config.js setup as follows:

export default defineConfig({
  build: {
    emptyOutDir: false,
    manifest: true,
    outDir: 'dist',
    rollupOptions: {
      input: {
        app: '/src/app/app.js',
        pub: '/src/app/pub.js'
      }
    },
    monjsOptions: { include: [] }
  },
  optimizeDeps: { disabled: false },
  plugins: [vue()]
})

This results in 1 manifest.json file, and the corresponding app.css/js/pub.css/js in my dist folder, along with any other assets that my app references like images.

Occasionally, running vite build will result in an extra set of CSS/JS files in my dist folder. This extra file set is a random ponent or JS file from my codebase or node_modules, and oftentimes will contain a bunch of code that should be in dist/app.js. I'm tearing my hair out trying to figure this out. I've updated from Vite 3 to 4 and tried every adjustment I can find for the config file. Here's an example where InputRadios.vue, a ponent from my repo, is showing up and contains most of my app code.

[dist]
  [assets]
    - app.css
    - app.js
    - InputRadios.js
    - InputRadios.css
    - logo.svg
    - pub.js
    - pub.css

If I ment out any references to InputRadios.vue, then e.g. VueRouter.css/js appears in the dist folder. If I ment out VueRouter, some other random file imported somewhere in my codebase shows up.

Should this be working the way I'm expecting, or am I misunderstanding how rollupOptions works?

I have 2 entry points to my app, with vite-config.js setup as follows:

export default defineConfig({
  build: {
    emptyOutDir: false,
    manifest: true,
    outDir: 'dist',
    rollupOptions: {
      input: {
        app: '/src/app/app.js',
        pub: '/src/app/pub.js'
      }
    },
    monjsOptions: { include: [] }
  },
  optimizeDeps: { disabled: false },
  plugins: [vue()]
})

This results in 1 manifest.json file, and the corresponding app.css/js/pub.css/js in my dist folder, along with any other assets that my app references like images.

Occasionally, running vite build will result in an extra set of CSS/JS files in my dist folder. This extra file set is a random ponent or JS file from my codebase or node_modules, and oftentimes will contain a bunch of code that should be in dist/app.js. I'm tearing my hair out trying to figure this out. I've updated from Vite 3 to 4 and tried every adjustment I can find for the config file. Here's an example where InputRadios.vue, a ponent from my repo, is showing up and contains most of my app code.

[dist]
  [assets]
    - app.css
    - app.js
    - InputRadios.js
    - InputRadios.css
    - logo.svg
    - pub.js
    - pub.css

If I ment out any references to InputRadios.vue, then e.g. VueRouter.css/js appears in the dist folder. If I ment out VueRouter, some other random file imported somewhere in my codebase shows up.

Should this be working the way I'm expecting, or am I misunderstanding how rollupOptions works?

• javascript
• vite
• rollupjs

2 Answers 2

I don't know why I was getting the above behavior with multiple input entries for rollupOptions, but here's my solution: use multiple vite configs.

vite.config-dev.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  publicDir: false,
  plugins: [vue()],
  server: {
    port: 3030,
    strictPort: true
  },
  preview: {
    port: 8080,
    strictPort: true
  }
})

vite.config-app.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  build: {
    emptyOutDir: false,
    manifest: 'manifest-app.json',
    outDir: 'dist',
    rollupOptions: {
      input: {
        app: '/src/app/app.js'
      }
    }
  },
  plugins: [vue()]
})

vite.config-pub.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  build: {
    emptyOutDir: false,
    manifest: 'manifest-pub.json',
    outDir: 'dist',
    rollupOptions: {
      input: {
        pub: '/src/app/pub.js'
      }
    }
  },
  plugins: [vue()]
})

package.json:

  ...
  "scripts": {
    "dev": "vite -c vite.config-dev.js",
    "build": "vite build -c vite.config-app.js && vite build -c vite.config-pub.js",
    ...

This is running through an Express server that serves some private and some public pages, hence the 2 entry points. If anyone runs into this and needs full(er) code examples, post a ment.

In addition to @charlie-schliesser's answer, build.emptyOutDir is must be set false in each config files.

export default defineConfig({
  // ...
  build: {
    emptyOutDir: false,
  },
  // ...
});