Babel.js vue组件库无法与nuxt js中的vuetify一起工作

h22fl7wq  于 2023-01-22  发布在  Babel
关注(0)|答案(1)|浏览(109)

我创建了一个单键vue库,并通过vue-cli-service build --target lib构建它。这个选项在nuxtjs中工作正常,但当我在我的包中包含vuetify并尝试在nuxtjs中使用它时,应用程序抛出一个错误。在nuxtjs中,我通过@nuxtjs/vuetify包含vuetify请帮助,因为我不明白问题出在哪里。
我的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"
  ]
}

在库中,它工作正常,甚至@click工作enter image description here
当我在我的库enter image description here中使用v-btn时,我看到了什么
正如您所看到的,当在我的应用程序中使用v-btn时,除了控制台中的错误之外,vuetify除了样式之外不能完全工作
在nuxt.config.js中设置构建版本transpile: \['@nuxtjs/vuetify'\] or transpile: \['vuetify'\]plugins: \[new VuetifyLoaderPlugin()\]也没有帮助

5jdjgkvh

5jdjgkvh1#

您是否按照Vuetify文档和nuxtjs/vuetify plugin page中的说明更新了nuxt.config.js

// nuxt.config.js
{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

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

相关问题