vue.js - 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 )，则不考虑上述选项。我被迫修改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'
  }
})

对于 VUETIFY 1.5.x

使用 Vuetify 1.5.x 而不是 Vuetify 2.x 时存在一些差异。

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

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

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'
    }
}