如何解决 Vuetify 错误“已声明 installComponents”？答案

【问题标题】：How to resolve the Vuetify error "installComponents has already been declared"?如何解决 Vuetify 错误“已声明 installComponents”？
【发布时间】：2020-08-05 06:44:59
【问题描述】：

Nuxt.js 最新版本在构建或部署具有 Vuetify 的项目时抛出以下错误。

remote: > 从 "!../node_modules/vuetify-loader/lib/runtime/installComponents.js" 导入 installComponents

   Module parse failed: Identifier 'installComponents' has already been declared (53:7)
You may need an appropriate loader to handle this file type.
|
| /* vuetify-loader */
> import installComponents from "!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js"
| import { VBtn } from 'vuetify/lib'
| import { VCard } from 'vuetify/lib'

【问题讨论】：

请分享您的 nuxt.config.js 文件内容

标签： vuetify.js nuxt.js

【解决方案1】：

没有 nuxt.config.js 很难说。但我遇到了这样的问题。之前，我使用了一个插件来连接 Vuetify。然后我安装了@nuxtjs/vuetify 模块，问题就来了。

这个问题很可能与 treeShaking 有关。 @nuxtjs/vuetify 仅在构建发生时打开 treeShaking。所以你在开发模式下没有问题，但是构建有问题。

就我而言，原因是我忘记从 nuxt.config.js 的构建部分中删除 VuetifyLoaderPlugin。

transpile: ['vuetify/lib'],
plugins: [new VuetifyLoaderPlugin()],

我还建议为开发模式启用 treeShaking。这将允许在开发模式下使用 SASS 变量。从 @nuxtjs/vuetify 版本 2 开始，它将始终处于启用状态。

vuetify: {
    customVariables: ['~/assets/variables.scss'], // need treeShake
    treeShake: true,
},

【讨论】：

【解决方案2】：

请移除 nuxt.config.js 中的 buildModules，这是为使用 Nuxt.js 的人准备的

{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

添加最新版本的模块

modules: [
    '@nuxtjs/vuetify',
  ],
vuetify: {
//what ever options you may like
  },

【讨论】：