我怎样才能排除一个vue文件夹,使其不在vite中构建?

8fsztsew  于 2023-03-09  发布在  Vue.js
关注(0)|答案(2)|浏览(529)

有没有可能从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
...

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

kq0g1dla

kq0g1dla1#

最后创建了2个路由器router.jsrouter-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')
huwehgph

huwehgph2#

我也遇到过类似的问题。我检查了一下环境,然后用惰性导入来解决它。类似下面这样的方法对你来说也是可行的:

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

相关问题