How can I exclude a vue folder from being build in vite?

Question

Is it possible to exclude a complete (lazy loaded) folder from a vite build? If so how.

import { defineConfig } from 'vite'
import { resolve as resolver } from 'path'

import vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'

const resolve = {
    alias: {
        'vue': 'vue/dist/vue.esm-bundler.js',
        '@': resolver(__dirname, './src')
    }
}

const plugins = [
    vue(),
    ViteComponents({
        dirs: ['src/shared/components'],
        extensions: ['vue'],
        deep: true,
    })
]

const build = {
        outDir: 'dist',
        assetsDir: 'assets',
        assetsInlineLimit: '4096',

        cssCodeSplit: false, // single CSS

        sourcemap: false,
        manifest: false,
        chunkSizeWarningLimit: 1000,
    }

// https://vitejs.dev/config/

export default defineConfig(({ command, mode }) => {
    if (command === 'serve') {
        return {
            // serve specific config
            plugins,
            resolve,
        }
    } else {
        return {
            // build specific config
            plugins,
            resolve,
            build
        }
    }

})

npm run build

is building my Examples. But I don't need them in production.

...
dist/assets/ExampleListGroup.58bffc95.js        0.70 KiB / gzip: 0.43 KiB
dist/assets/ExampleMainTitle.4841825d.js        0.66 KiB / gzip: 0.39 KiB
dist/assets/ExampleMarkdownEditor.05ed02a3.js   0.67 KiB / gzip: 0.39 KiB
dist/assets/ExampleMenuStructure.36b10505.js    0.68 KiB / gzip: 0.41 KiB
dist/assets/ExampleMarkDown.ef4418d4.js         0.68 KiB / gzip: 0.40 KiB
dist/assets/ExamplePopupMenu.9c9d49e2.js        0.60 KiB / gzip: 0.38 KiB
dist/assets/ExampleObjectSelect.bc2a5189.js     4.86 KiB / gzip: 1.36 KiB
...

I'd like to exclude them before build, not remove them after the build.

Thanks.

Does this help you? https://stackoverflow.com/questions/61122635/vue-js-exclude-folders-from-webpack-bundle — StevenSiebert
– StevenSiebert, Commented Oct 11, 2021 at 20:16
@StevenSiebert Vite uses Rollup, so that answer doesn't apply here. — tony19
– tony19, Commented Oct 11, 2021 at 21:59

Joeri · Accepted Answer · 2021-10-26 15:18:08Z

Ended up making 2 routers router.js and router-dev.js And an alias to include one of them

vite.config.js:

import { defineConfig } from 'vite'
import { resolve as resolver } from 'path'

import vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'

const resolve = {
    development: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
            '@': resolver(__dirname, './src'),
            '@dynarouter': resolver(__dirname, './src/router-dev.js')
        }
    },
    production: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
            '@': resolver(__dirname, './src'),
            '@dynarouter': resolver(__dirname, './src/router.js')
        }
    }
}

const plugins = [
    vue(),
    ViteComponents({
        dirs: ['src/shared/components'],
        extensions: ['vue'],
        deep: true,
    }),
]

const build = {
    outDir: 'dist',
    assetsDir: 'assets',
    assetsInlineLimit: '4096',

    cssCodeSplit: false, // single CSS

    sourcemap: false,
    manifest: false,
    chunkSizeWarningLimit: 1000,
    rollupOptions: {}
}

// https://vitejs.dev/config/

export default defineConfig(({ command, mode }) => {
    if (command === 'serve') {
        return {
            // serve specific config
            plugins,
            resolve: resolve.development,
        }
    } else {
        return {
            // build specific config
            plugins,
            resolve: resolve.production,
            build,
        }
    }
})

main.js:

import { createApp } from 'vue'
import App from '@/App.vue'


// import router from '@/router-dev.js'
// import router from '@/router.js'
import router from '@dynarouter'

import global from '@/global.js'
import store  from '@/shared/stores' 
import click  from '@/shared/directives/clickOutside.js'

const app = createApp(App)
    .use(router)
    .use(store)
    .directive('click-outside', click)

app.config.devtools = true
app.mount('#app')

jogarcia · Accepted Answer · 2023-03-07 21:51:58Z

0

I had a similar problem. I check the environment and use lazy import to solve it. Something like this could work for you:

if (process.env.NODE_ENV !== "production") {
  routes.push({
    path: "some-route",
    name: "SomeName",
    component: () => import("@/views/app/ExampleListGroup"),
  });
}

answered Mar 7, 2023 at 21:51

jogarcia

2,8512 gold badges26 silver badges47 bronze badges

3 Comments

Joeri Over a year ago

That should work fine for the manual included routes but not for the autoloaded (vite-plugin-components) components.

jogarcia Over a year ago

The way I autoload components is with a small script. You can get the names. What about making a list of components you don't want to load in production? If the component being loaded by the autoloader is in the list you don't load it in production.

Joeri Over a year ago

I guess I could add a meta property to not include the defined route in the router, but I think rollup will still compile all the code and thus upload it to the serve.

Collectives™ on Stack Overflow

How can I exclude a vue folder from being build in vite?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related