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 文档中描述了此行为。这个入口点文件通常是 Vuetify 插件的导入位置。要解决此问题，只需将 Vuetify 的导入移动到.vue项目的主要组件中即可。这通常称为App.vue，但如果您不使用 CLI 来搭建您的项目，则可能有另一个名称。

在主.vue文件中，导入 Vuetify 和您的 Vuetify 选项。然后，在组件声明中，只需包含一个vuetify用导入的 Vuetify 实例填充的属性。下面是App.vue来自 Vuetify 的基本“Hello World”示例应用程序的组件，经过修改以兼容导出为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生命周期钩子中单独配置主题和图标。下面是一个例子：

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