首页 > 解决方案 > 捆绑一个没有 Vuetify 的 Vue-cli 项目

问题描述

我尝试创建一些 Vue 库供我们公司内部使用。

由于我们所有的项目都使用 Vuetify,并且我们的库也公开了一些使用它的组件,我不想将 Vuetify 捆绑在库中,而是使用与“最终”项目一起安装的那个。

我查看了 Webpack 和 Vue-cli 文档,并externals在 webpack 中找到了配置键。但是这个vue.config.js文件:

module.exports = {
  configureWebpack: {
    externals: {
      vuetify: "commonjs2 vuetify",
    },
  },
  chainWebpack: config => {
    // These are some necessary steps changing the default webpack config of the Vue CLI
    // that need to be changed in order for Typescript based components to generate their
    // declaration (.d.ts) files.
    //
    // Discussed here https://github.com/vuejs/vue-cli/issues/1081
    if (process.env.NODE_ENV === "production") {
      config.module.rule("ts").uses.delete("cache-loader");

      config.module
        .rule("ts")
        .use("ts-loader")
        .loader("ts-loader")
        .tap(opts => {
          opts.onlyCompileBundledFiles = true;
          opts.transpileOnly = false;
          opts.happyPackMode = false;
          return opts;
        });
    }
  },
  parallel: false,
};

似乎不起作用,因为 Vuetify 仍在捆绑包中(因此,输出的权重很大)。

由于我不想多次加载 Vuetify ......我怎样才能做到这一点?

标签: vue.jswebpackvuetify.jsvue-cli

解决方案


推荐阅读