如何从构建中排除 vuetify 和 vue？答案

【问题标题】：How to exclude vuetify and vue from the build?如何从构建中排除 vuetify 和 vue？
【发布时间】：2020-05-14 15:01:57
【问题描述】：

我通过 VueCLI 创建了一个自定义库。我想通过在最终包中不包含 vuetify 和 vue.js 来减小构建的大小。

使用命令构建时，我的最终构建文件 (*.umd.min.js) 可以正常工作：

vue-cli-service build --inline-vue --target lib --formats umd-min ./src/components/Component.vue

如果我将 vuetify 和 vue.js 外部化，那么当我连接库时会出现错误：

Cannot read property 'extend' of undefined 在 vuetify 库中

如何从构建中移除 vuetify 和 vue.js？

【问题讨论】：

标签： vue.js vuetify.js vue-cli

【解决方案1】：

我使用构建命令： vue-cli-service build --target lib --formats umd-min ./src/components/Component.vue

并在核心应用中全局注册了 vuetify 组件。

【讨论】：

vuetify 对我来说文件大小没有任何区别。

【解决方案2】：

我可以按照此处指南中的说明使用汇总来做到这一点。

https://blog.harveydelaney.com/creating-your-own-vue-component-library/

关键是要确保 vuetify 在 package.json 的 peerDependencies 中列出。

【讨论】：

peerDependencies 对输出没有影响，但为什么呢？
我不确定你的问题。但是是的，peerDeps 只会在构建过程中使用，而不是捆绑在最终输出中。因为您不希望每个 vue 组件都包含在您的发行版中。
我的意思是把 vuetify 放到依赖项或 peerDependencies 中对构建输出没有影响——我希望输出变得更小。

【解决方案3】：

你可以使用

configureWebpack: {
    resolve: {
      symlinks: false,
      alias: {
        vue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      }
    }
  },

在您使用该库的 App 的 vue.config.js 中。

【讨论】：