vue.js 无法找到该页

uujelgoq 于 2023-10-23 发布在 Vue.js

关注(0)|答案(3)|浏览(126)

所以，在运行npm run build之后，它包含：vite build。
使用：“vuetify”：“^3.0.0-beta.4”和“vue”：“^3.2.31”
构建的应用程序给出了这个相当模糊的错误：

Error: [Vuetify] Could not find defaults instance

老实说，我不知道这个错误意味着什么。有人见过这个吗？或者有人知道什么是“默认示例”吗？
这是主.ts文件：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import vuetify from "./plugins/vuetify";
import { loadFonts } from "./plugins/webfontloader";
import { createPinia } from "pinia";

loadFonts();

const pinia = createPinia();

createApp(App)
  .use(router)
  .use(vuetify)
  .use(pinia)
  .mount('#app');

这是在plugins/vuetify.ts里面

// Styles
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import '../../node_modules/front-end-component-library/dist/style.css';

// Vuetify
import '@fortawesome/fontawesome-free/css/all.css';
import { createVuetify } from 'vuetify';
import {aliases, fa} from 'vuetify/lib/iconsets/fa';
import {mdi} from 'vuetify/lib/iconsets/mdi';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default createVuetify({
    components,
    directives,
    theme: {
        themes: {
            JLightTheme: {
                dark: false,
                colors: {
                    background: '#e3e4e0',
                    surface: '#FFFFFF',
                    primary: '#5A392D',
                    'primary-darken-1': '#3700B3',
                    secondary: '#4D5A58',
                    'secondary-darken-1': '#018786',
                    accent: '#e3e4e0',
                    error: '#B00020',
                    info: '#2196F3',
                    success: '#4CAF50',
                    warning: '#FB8C00',
                }
            },
        }
    },
    icons: {
        defaultSet: 'fa',
        aliases,
        sets: {
            fa,
            mdi
        }
    }
});

vue.js

来源：https://stackoverflow.com/questions/72813246/vuetify-could-not-find-defaults-instance

3条答案

按热度按时间

des4xlb01#

我在尝试使用Vitest和Vuetify配置单元测试时遇到了同样的错误。
我把我的解决方案留在这里，以防其他人也来。我可以通过在我的测试用例文件中创建一个新的vuetify插件来解决我的错误。

// test/helloworld.spec.ts
import { mount } from '@vue/test-utils'
import { expect, test } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import HelloWorld from '../../src/components/HelloWorld.vue'

const vuetify = createVuetify({
  components,
  directives,
})

global.ResizeObserver = require('resize-observer-polyfill')

test('displays message', () => {
  const wrapper = mount({
    template: '<v-layout><hello-world></hello-world></v-layout>'
  }, {
    props: {},
    global: {
      components: {
        HelloWorld,
      },
      plugins: [vuetify],
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Components')
})

赞(0）回复(0）举报 2023-10-23

2wnc66cl2#

我在Nuxt3中使用Vuetify使用带有AW-*标记名的https://github.com/zadigetvoltaire/nuxt-gtm插件实现GTM时遇到了问题。
提交了一个关于该repo的问题，让我们看看它是否/何时会被修复：https://github.com/zadigetvoltaire/nuxt-gtm/issues/15。对你们中的一些人来说，这可能是一个潜在的解决方案。

赞(0）回复(0）举报 2023-10-23

bzzcjhmw3#

我花了很长时间才找到答案：IconOptions类型错误。将图标选项中的defaultSet替换为defaults：

icons: {
  defaults: 'fa',
  aliases,
  sets: { fa, mdi }
}

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js 无法找到该页

3条答案

相关问题

热门标签

最新问答