如何在 laravel-mix 中使用 vuetify a-la-carte？答案

【问题标题】：How to use vuetify a-la-carte with laravel-mix?如何在 laravel-mix 中使用 vuetify a-la-carte？
【发布时间】：2020-08-03 11:51:06
【问题描述】：

我想在 laravel-mix 中使用 Vuetify a-la-carte 方法。

我一直在阅读docs 以及有用的post。

这是我完整的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 已缩小，但仍为 623 kb。

我错过了什么？为什么VuetifyLoaderPlugin 不起作用？

【问题讨论】：

标签： vue.js webpack vuetify.js laravel-mix

【解决方案1】：

所以我假设你做了npm run production 但你的 voyager.js 没有缩小？

Afaik 混合，缩小只会在生产构建期间发生 (npm run production)。

【讨论】：

抱歉，我的问题问得有点不清楚。缩小正在工作，问题是所有组件都存储在我的 js 文件中，而不仅仅是我使用的那些
抱歉回复晚了，如果您提到的组件是基于 Vue 的，也许可以检查 app.js 和 package.json 文件可能路由/包含您不需要的其他组件.希望有帮助

【解决方案2】：

您是否仍然在 voyager.js 文件中从 Vuetify 导入主库？像这样：

import Vuetify from 'vuetify';

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

import Vuetify from 'vuetify/lib';

注意/lib 后缀。

【讨论】：