时间戳

首页 > 解决方案 > Vuetify Uncaught TypeError：无法读取未定义的属性“安装”

javascript - Vuetify Uncaught TypeError：无法读取未定义的属性“安装”

问题描述

在尝试让材料图标加载到我的 Vuetify 项目（使用 Webpack 和 Apollo）时，我根本无法显示我的应用程序。

我按照 Vuetify for 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)insrc/plugins/vuetify.js指示 Vue 安装/使用来自'vuetify'（我已确认已安装在 node_modules 中）的 Vuetify。然后定义选项，例如指定图标集和将使用的任何组件，然后使用这些选项实例化 Vuetify 并通过export default new Vuetify(opts).

这个导出的 Vuetify 然后通过main.js从@/plugins/vuetify. 我相信这@是 webpack 的快捷方式，它会告诉 webpack 将别名解析为src文件夹。由于vuetify作为导入的别名提供，因此我将其传递给 Vue 实例化。所有这些看起来都对吗？

我的babel.config.js内容也很少，尽管我不认为这与我的问题有关。

现在，关于为什么这不起作用以及如何使它起作用的问题？

标签： javascriptvue.jswebpackvuejs2vuetify.js

解决方案

您正在将 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 类，并将安装功能设置为：
Vuetify.install = install;

此外，为了获得最佳包大小，请考虑对 Vuetify 使用treeshaking。正如他们所说：

"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."

推荐阅读