如何让 Vite 将依赖项拆分到每个入口点的供应商文件中，而无需手动编写它们？有点像 Laravel Mix

Question

我试图让它的行为类似于我在 Laravel Mix 中的行为。这是我的设置：

import laravel from 'laravel-vite-plugin';

export default {
    plugins: [
        laravel({
            input: [
                'resources/css/admin.css',
                'resources/css/public.css',
                'resources/js/admin.js',
                'resources/js/public.js'
            ],
            refresh: true,
        })
    ]
};

如果我添加

splitVendorChunkPlugin

，我会得到一个供应商文件，其中包含

admin.js

和

public.js

中的所有依赖项。有没有办法让每个入口点自动创建自己的供应商文件？因此，当调用

admin.js

时，它会导入类似

vendor-admin.js

的内容，其中包含在

admin.js

中找到的依赖项，而

public.js

将导入

vendor-public.js

，其中包含在

public.js

中找到的依赖项。

换句话说，我有：

• admin.js，导入

  axios

  和

  highlight.js

  。
• public.js，导入

  vue

  和

  jszip

  。

Vite，使用

splitVendorChunkPlugin

，可以执行以下操作：

• vendor.js，其中包含

  axios

  、

  highlight.js

  、

  vue

  和

  jszip

  。
• admin.js
• public.js

我想要什么：

• vendor-admin.js，其中包含

  axios

  和

  highlight.js

  。
• admin.js
• vendor-public.js，其中包含

  vue

  和

  jszip

  。
• public.js

确切的文件名或文件夹结构对我来说并不是非常重要，只要在请求时一切都得到解决即可。

我读过有关

manualChunks

的内容，但我的理解是，我必须在

vite.config.js

中编写每个依赖项，对吗？

Answer 1

你找到解决办法了吗？我正在尝试为每个组件做类似的事情。