vue.js - 如何在 laravel-mix 中使用 vuetify a-la-carte？

Question

我想将 Vuetify a-la-carte方法与 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已缩小，但仍为 623 kb 大。

我错过了什么？为什么VuetifyLoaderPlugin不工作？

标签： vue.jswebpackvuetify.jslaravel-mix

Answer 1

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

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