Vue.js 如何将vuetify点菜与laravel mix一起使用？

我想将Vuetify方法用于laravel mix

我一直在读这本书，这本书对我很有帮助

这是我的完整

webpack.mix.js

配置：

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
 mix.webpackConfig({
   externals: {
    vue: 'Vue'
  }
 });

mix.options({
    extractVueStyles: 'public/css/components.css',
    purifyCss: true,
});

mix.webpackConfig({
       plugins: [
           new VuetifyLoaderPlugin({
               options: {}
           }),
       ]
   })
.js('resources/assets/js/voyager.js', 'public/js')

这会将js编译成

public/js/voyager.js

中的有效文件，并将css编译成

public/css/components.css

但是，

voyager.js

包含vuetify的所有组件。我只在我的文件中使用

v-alert

。

VuetifyLoaderPlugin

的目的是只加载我实际使用的组件。文件

voyager.js

已缩小，但仍有623KB大

---

我错过了什么？为什么

VuetifyLoaderPlugin

不起作用？

所以我假设您已经

npm运行了生产

，但您的voyager.js没有缩小

---

在混合模式下，缩小只会在生产构建期间进行（

npm运行生产

）。

是否仍有可能从voyager.js文件中的Vuetify导入主库？ 像这样：

import Vuetify from 'vuetify';

如果要使用LoaderPlugin，必须确保从lib文件夹导入Vuetify，如下所示：

import Vuetify from 'vuetify/lib';

---

注意

/lib

后缀。

对不起，我的问题问得有点不清楚。缩小功能正在发挥作用，问题是所有组件都存储在我的js文件中，而不仅仅是我使用的组件。很抱歉，如果您提到的组件是基于Vue的，也许可以使用

app.js

和

package.json

文件进行检查，这些文件可能会路由/包括您不需要的其他组件。希望有帮助