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?
2 Answers
Reset to default 3I 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,
},
// ...
});