Vue-cli 库构建中未考虑 Vuetify 选项

Question

我的应用程序使用 <v-app> 正确包装并且我的 vuetify 选项在开发模式下工作正常，或者如果我使用 vue-cli-service build 正常构建。

Vue.use(Vuetify, {
  iconfont: 'fa',
  theme: {
    primary: '#213e79',
    secondary: '#c0d8ed', 
    accent: '#4ea3ed',
    error: '#b71c1c',
    info: '#2196f3',
    success: '#66bb6a', 
    warning: '#f57f17'
  }
});

但是，如果我在 库模式 中构建（例如：vue-cli-service build --target lib --name xxx），则上述选项 NOT 被考虑帐户。由于缺乏更好的解决方案，我被迫修改 vuetify/dist/vuetify.js..

知道可能是什么问题吗？如果你们中有人有解决方法，那就太好了:)

Answer 1

当 Vue CLI 的构建目标是 lib 时，不会使用您的原始入口点（例如 main.js）。 Vue CLI docs 中描述了此行为。这个入口点文件通常是导入 Vuetify 插件的地方。要解决此问题，只需将 Vuetify 的导入移动到项目的主要 .vue 组件中。这通常称为 App.vue，但如果您没有使用 CLI 构建项目，则可能有其他名称。

在主 .vue 文件中，导入 Vuetify 和您的 Vuetify 选项。然后，在组件声明中，只需包含一个 vuetify 属性并填充您导入的 Vuetify 实例。下面是 Vuetify 的基本 "Hello World" 示例应用程序中的 App.vue 组件，经过修改以兼容导出为 lib:

<script>
import HelloWorld from './components/HelloWorld';

import vuetify from './plugins/vuetify'     //IMPORT THE VUETIFY CONFIG FILE

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),

  vuetify, //ADD IT TO THE COMPONENT DECLARATION
};
</script>

更新：

为了使用 Vuetify 2.x 在组件中加载 Vuetify，Vuetify 插件文件应遵循以下模式：

import Vue from 'vue'
import Vuetify from 'vuetify';
import '@/assets/stylus/main.styl';

Vue.use(Vuetify)

export default new Vuetify ({
  iconfont: 'fa',
  theme: {
    primary: '#213e79',
    secondary: '#c0d8ed',
    accent: '#4ea3ed',
    error: '#b71c1c',
    info: '#2196f3',
    success: '#66bb6a',
    warning: '#f57f17'
  }
})

验证 1.5.x

使用 Vuetify 1.5.x 而不是 Vuetify 2.x.

时存在一些差异

首先，没有必要在组件声明中包含 vuetify 对象。您仍应导入 ./plugins/vuetify 文件。

其次，主题和图标必须在 beforeCreate 生命周期挂钩中单独配置。这是一个例子：

beforeCreate() {

    //Override the default icons with the Font-Awesome preset
    this.$vuetify.icons = {
      'complete': 'fas fa-check',
      'cancel': 'fas fa-times-circle',
      'close': 'fas fa-times',
      'delete': 'fas fa-times-circle', // delete (e.g. v-chip close)
      'clear': 'fas fa-times-circle', // delete (e.g. v-chip close)
      'success': 'fas fa-check-circle',
      'info': 'fas fa-info-circle',
      'warning': 'fas fa-exclamation',
      'error': 'fas fa-exclamation-triangle',
      'prev': 'fas fa-chevron-left',
      'next': 'fas fa-chevron-right',
      'checkboxOn': 'fas fa-check-square',
      'checkboxOff': 'far fa-square', // note 'far'
      'checkboxIndeterminate': 'fas fa-minus-square',
      'delimiter': 'fas fa-circle', // for carousel
      'sort': 'fas fa-sort-up',
      'expand': 'fas fa-chevron-down',
      'menu': 'fas fa-bars',
      'subgroup': 'fas fa-caret-down',
      'dropdown': 'fas fa-caret-down',
      'radioOn': 'far fa-dot-circle',
      'radioOff': 'far fa-circle',
      'edit': 'fas fa-edit',
      'ratingEmpty': 'far fa-star',
      'ratingFull': 'fas fa-star',
      'ratingHalf': 'fas fa-star-half'
    }

    //Override the theme colors.
    this.$vuetify.theme = {
        primary: '#213e79',
        secondary: '#c0d8ed', 
        accent: '#4ea3ed',
        error: '#b71c1c',
        info: '#2196f3',
        success: '#66bb6a', 
        warning: '#f57f17'
    }
}

Vue-cli 库构建中未考虑 Vuetify 选项

Vuetify options not taken into account in vue-cli library build

webpack

vue.js

vuetify.js

vue-cli