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

Posted 2023-02-22

【中文标题】如何从构建中排除 vuetify 和 vue？

【英文标题】：How to exclude vuetify and vue from the build?

【发布时间】：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？

【参考方案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 中。