Nuxt.js 使用 Vuetify：无法读取未定义的 属性 '$vuetify'

Question

我在我的应用程序中使用 Vuetify 主题并尝试从我的项目中的另一个文件引用我的浅色主题中的原色，但出现以下错误：

TypeError: Cannot read property '$vuetify' of undefined

我如何在 nuxt.config.js 文件中定义 vuetify：

buildModules: [
    '@nuxtjs/vuetify',
  ],
...
...
vuetify: {
    theme: {
      dark: false,
      themes: {
        light: {
          primary: '#000000',
          accent: '#000000',
          secondary: '#000000',
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },

我如何在其他地方的 .js 文件中引用它：

this.$vuetify.theme.themes.light.primary = '#ffffff'

在同一个文件中，我在我的应用栏中引用 $vuetify，如下所示：

:extended="$vuetify.breakpoint.lgAndUp"

而且我没有任何问题。我已经尝试 console.logging 下面我尝试调用主题的 $vuetify 对象，它记录了 'undefined'

我很好奇我的 nuxt.config.js 文件中还缺少哪些其他配置，以允许我在我的应用程序的其他地方引用主题。我已经包含了文档所说的为 nuxt.js 个应用程序实施的所有内容。

Answer 1

我们在这里缺少上下文，但我很确定这是因为您试图在错误的地方调用它。

TypeError: Cannot read property '$vuetify' of undefined

这意味着它试图 运行 undefined.$vuetify，所以 this 不存在。 this 应该引用 Vue 上下文，它只存在于 vue 组件代码或插件中，而不是在每个 javascript 文件中。

您可能希望将代码行移动到可以访问 Vue 应用程序上下文的位置，否则 $vuetify 将不存在。它不是全局可访问的。