在我在 vuetify 项目中使用的包中加载 vuetify

Question

将 vuetify 加载到我在 vuetify 项目中使用的包中的正确方法是什么？ 在为项目提供服务时，一切似乎都很好，但是当我构建项目时，我遇到了一些 css/sass 问题

我尝试过的事情：

• 使用 vuetify 加载器：css 加载了两次，因此我无法覆盖 sass 变量
• 没有 vuetify loader：包没有 vuetify css，所以看起来很糟糕
• 没有带有 vuetify.min.css 的 vuetify 加载器：css 加载了两次，所以我无法覆盖 sass 变量，并且加载的 css 是所有 css，所以它很大

我的包被称为 vuetify-resource，这是index.js 的源代码（没有 vuetify 加载器）此时一切都在npm run serve 上运行但是当我构建包时没有“访问权限”到 vuetify css。

import Vue from 'vue';
import Vuetify from 'vuetify';
import VuetifyResourceComponent from './VuetifyResource.vue';

Vue.use(Vuetify);
const VuetifyResource = {
    install(Vue, options) {
        Vue.component('vuetify-resource', VuetifyResourceComponent);

    },
};

export default VuetifyResource;

Answer 1

为了解决我的问题，我必须做几件事。

1. 制作vuetify和vue的peer依赖
2. 将 vuetify 添加到 webpack 外部，因此当有人使用该包时，该包使用该项目 vuetify
3. 不再需要在 index.js 中导入 vue 和 vuetify 了，使用包的项目导入了
4. 导入您在每个 .vue 文件中使用的特定组件

---

例如：

Vue.config.js

module.exports = {
    configureWebpack: {
        externals: {'vuetify/lib': 'vuetify/lib'},
    },
};

index.js

import VuetifyResourceComponent from './VuetifyResource.vue';

const VuetifyResource = {
    install(Vue, options) {
        Vue.component('vuetify-resource', VuetifyResourceComponent);

    },
};

export default VuetifyResource;

component.vue 的一部分

import { VDataTable } from 'vuetify/lib';

export default {
    name: 'vuetify-resource',
    components: {
        VDataTable
    },

Answer 2

如果您使用vuetify-loader，则不需要里卡多回答中的第 4 步，它会为您完成这项工作。

我会修改第 2 步，以便将 Vuetify 的样式/css 从您的捆绑包中排除。如果您不排除它们，当您的库和应用程序之间的 Vuetify 版本不同时，您可能会遇到样式问题。

在 vue.config.js 中使用正则表达式，如下所示：configureWebpack: { externals: /^vuetify\// }。这样，库包中只包含您自己的样式。