Пытаясь загрузить значки материалов в мой проект Vuetify (с Webpack и Apollo), я вообще не могу отобразить свое приложение.

Я выполнил инструкции по установке Vuetify для webpack, но получаю сообщение об ошибке

Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
    at eval (vuetify.js?402c:12)
    at Module../src/plugins/vuetify.js (app.js:1253)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (main.js:15)
    at Module../src/main.js (app.js:1241)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.1 (app.js:1338)

Мне кажется, это указывает на то, что проблема заключается в моем src/plugins/vuetify.js со строкой Vue.use(Vuetify). Однако я не могу определить, почему Vuetify не может быть установлен (?), Потому что я импортирую его в файл.

src/plugins/vuetify.js

import Vue from 'vue'
import {
    Vuetify,
    VApp,
    VCard,
    VIcon,
    /* other imports ... */
} from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);

const opts = {
    components: {
        VApp,
        VCard,
        VIcon,
        /* other imports */
    },
    icons: {
        iconfont: 'mdi', // default - only for display purposes
    },
}

export default new Vuetify(opts)

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import apolloProvider from './vue-apollo'
import store from './store'
import vuetify from '@/plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  vuetify,
  router,
  apolloProvider: apolloProvider,
  store,
  render: h => h(App)
}).$mount('#app')

Насколько я понимаю, Vue.use(Vuetify) в src/plugins/vuetify.js инструктирует Vue установить / использовать Vuetify, который поступает из 'vuetify' (который, как я подтвердил, установлен в node_modules). Затем определяются параметры, такие как указание набора значков и любых компонентов, которые будут использоваться, а затем создается экземпляр Vuetify с этими параметрами и передается наружу через export default new Vuetify(opts).

Затем к этому экспортированному Vuetify можно получить доступ в main.js, импортировав его из @/plugins/vuetify. Я считаю, что @ - это ярлык для webpack, который сообщает webpack разрешить псевдоним для папки src. Поскольку vuetify предоставляется как псевдоним для импорта, я затем передаю его в экземпляр Vue. Все это кажется правильным?

Также у меня есть babel.config.js с очень небольшим содержанием, хотя я не думаю, что это связано с моей проблемой.

Теперь перейдем к вопросу, почему это не работает и как мне заставить это работать?

0
Joe Howard 11 Фев 2021 в 00:17

1 ответ

Лучший ответ

Вы импортируете Vuetify как отдельные компоненты.
Попробуйте напрямую импортировать класс Vuetify:

// src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
})

ссылка на сайт

Таким образом, вы импортируете весь класс Vuetify с функцией install , заданной как:
Vuetify.install = install;

Кроме того, для получения оптимального размера пакета рассмотрите возможность использования treehaking для Vuetify. Как говорится:

"In order to use treeshaking, you must import Vuetify from vuetify/lib."
and
"Treeshaking will only work with Webpack 4 in production mode.
This is automatic when using Vue CLI."
1
Sergey Sklyar 10 Фев 2021 в 23:06