如何排除 vue 文件夹在 vite 中构建?

2024-03-24

是否可以从 vite 构建中排除完整(延迟加载)文件夹? 如果是这样怎么办。

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

正在构建我的示例。但我在生产中不需要它们。

...
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
...

我想在构建之前排除它们,而不是在构建之后删除它们。

Thanks.


最终制作了2个路由器router.js and router-dev.js以及包含其中之一的别名

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')
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何排除 vue 文件夹在 vite 中构建? 的相关文章

随机推荐