_plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default 不是构造函数答案

【问题标题】：_plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default is not a constructor_plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default 不是构造函数
【发布时间】：2019-05-10 21:18:55
【问题描述】：

我已经用vue cli 3 构建了一个 vue 应用程序并添加了 vuetify。现在为了减少我的包大小，我将 vuetify 导入更改为：

我正在使用vuetify 1.5.5 和vue 3.7.0

import Vue from 'vue';
import Vuetify, { VLayout, VBtn, VApp } from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';

Vue.use(Vuetify, {
  components: {
    VApp,
    VLayout,
    VBtn,
  },
  theme: {
    primary: '#ee44aa',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107',
  },
  options: {
    customProperties: true,
  },
  iconfont: 'md',
});

export default Vuetify;

但在此之后，我在控制台中收到此错误：

【问题讨论】：

我遇到了一个非常相似的问题，它在收到此错误Failed to resolve loader: stylus-loader You may need to install it. 后立即开始发生，然后我去安装了带有npm install --save-dev stylus stylus-loader webpack 的 stylus-loader 然后我在控制台中遇到了错误，我们'现在重新面对。你也有这个问题吗？它可能正在导入以解决此问题。
我解决了我的问题。您是否使用 vuetify 的第 2 版？
我使用的是 1.5.0 版。不幸的是，我无法从 1.5 升级到 2，因为这会破坏一切，但应该注意的是，如果您不介意根据版本 2 文档（我这样做）升级所有组件，升级到版本 2 可以解决问题。
版本2更好，组件会坏是正常的，因为v2有很多改进。
为什么要导出export default Vuetify;，你是不是在什么地方用的？

标签： javascript vue.js webpack vuetify.js

【解决方案1】：

总结：你不应该写 export default Vuetify； vuetify.js 只是一个你应该在 main.js 中导入的 js 文件

// plugins/vuetify.js


import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
iconfont: 'md',
  theme: {

primary: colors.green.base, // #4CAF50

secondary: colors.red.lighten4, // #FFCDD2

accent: colors.indigo.base, // #3F51B5

search: colors.grey.lighten2, // #E0E0E0

searchButton: colors.green.lighten3,  // #A5D6A7

newsBlock: colors.grey.lighten4, // #F5F5F5

// info: colors.lighten1,

// warning: colors.darken2,

// error: colors.accent4,

// success: colors.lighten2,

  }
})


// main.js

import Vue from 'vue'
import './plugins/vuetify'
...
new Vue({
  el: "#app",
  router,
  store,
  render: h => h(App),
})

【讨论】：

这不是问题。我的猜测是 OP 正在导出 Vuetify 并在其他地方实例化它。如您所见，该错误指的是 OP 试图使用 Vuetify 作为构造函数。