如何解决验证错误"installComponents已被声明“？

Question

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

远程：>从"!../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'

Answer 1

没有nuxt.config.js就很难判断。但我也遇到过这样的问题。早些时候，我用一个插件连接了Vuetify。然后我安装了@nuxtjs/vuetify模块，问题出现了。

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

在我的例子中，原因是我忘记了从nuxt.config.js的build部分中删除VuetifyLoaderPlugin。

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

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

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

Answer 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
  },