Vue组件库在Nuxt.js中与Vuetify集成失败求助

• 我通过vue-cli-service build --target lib命令构建了一个仅包含单个按钮的Vue组件库，该库在Nuxt.js项目中可正常使用。
• 但当组件库引入Vuetify，且Nuxt.js项目通过@nuxtjs/vuetify引入Vuetify时，应用抛出错误。
• 使用原生<button>时，组件库功能正常，@click事件也能正常触发；但使用v-btn时，除样式外Vuetify完全失效，控制台出现报错。
• 我已尝试在nuxt.config.js的build配置中设置transpile: ['@nuxtjs/vuetify']或transpile: ['vuetify']，同时添加plugins: [new VuetifyLoaderPlugin()]，但均未解决问题。

组件库的package.json配置如下：

{
  "name": "uikit",
  "version": "0.1.0",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name uikit src/index.js",
    "lint": "vue-cli-service lint"
  },
  "module": "./dist/uikit.common.js",
  "main": "./dist/uikit.umd.js",
  "files": [
    "./dist"
  ],
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vuetify": "^2.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  },
  "peerDependencies": {
    "vue": "^2.7.10",
    "vuetify": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

1. 调整组件库依赖配置 #

将组件库dependencies中的vuetify移至devDependencies，因为peerDependencies已声明了对Vuetify的依赖，避免打包时重复引入Vuetify实例：

"dependencies": {
  "core-js": "^3.8.3",
  "vue": "^2.6.14"
},
"devDependencies": {
  // 保留原有devDependencies
  "vuetify": "^2.6.0"
}

2. 组件库避免独立初始化Vuetify #

组件库中的组件直接使用宿主Nuxt项目提供的Vuetify实例，不要在组件库内部单独初始化Vuetify。比如组件库入口文件不要写以下代码：

import Vuetify from 'vuetify'
Vue.use(Vuetify)
export default new Vuetify({...})

3. 配置Nuxt项目的编译与外部依赖 #

在Nuxt项目的nuxt.config.js中：

• 添加组件库到transpile列表，确保Nuxt正确编译组件库代码：

build: {
  transpile: ['uikit', 'vuetify']
}

• 配置externals，让组件库复用Nuxt项目中的Vuetify：

build: {
  externals: {
    vuetify: 'Vuetify'
  }
}

4. 组件库构建时排除Vuetify #

在组件库项目的vue.config.js中配置externals，避免将Vuetify打包进组件库：

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      vuetify: 'vuetify'
    }
  }
}

5. 版本一致性检查 #

确保组件库peerDependencies中的Vue、Vuetify版本，与Nuxt项目中安装的版本匹配，避免版本冲突。比如组件库要求Vue^2.7.10，需确认Nuxt项目已安装对应版本的Vue（Nuxt 2默认Vue版本可能低于2.7，需手动升级）。

内容的提问来源于stack exchange，提问作者Yeezussniper