vue cli 构建从 bootstrap-vue-next 中挑选错误

Question

我正在使用组合 API 将应用程序从 vue 2 移植到 vue 3。

我们在旧应用程序中使用 bootstrap，经过一番研究，我意识到我们应该在 vue 3 中使用 bootstrap-vue-next。

现在的问题是，为应用程序提供服务工作正常，但在尝试构建生产环境时，它会从 node_modules 文件夹中抛出 30 多个错误。我已从 tsconfig.json 中排除了 node_modules（也许这就是它运行但构建失败的原因），并且已经添加了 SkillLibCheck。

任何想法表示赞赏！

package.json：

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.8",
    "@fullcalendar/list": "^6.1.8",
    "@fullcalendar/resource-timegrid": "^6.1.8",
    "@fullcalendar/timegrid": "^6.1.8",
    "@fullcalendar/vue3": "^6.1.8",
    "bootstrap": "^5.3.1",
    "bootstrap-icons-vue": "^1.10.3",
    "bootstrap-vue": "^2.23.1",
    "bootstrap-vue-next": "^0.10.10",
    "core-js": "^3.8.3",
    "jwt-decode": "^3.1.2",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.2.4",
    "vuex": "^4.0.2",
    "vuex-persistent": "^0.0.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "sass": "^1.64.2",
    "sass-loader": "^13.3.2",
    "typescript": "~4.5.5"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "node": true,
      "vue/setup-compiler-macros": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:vue/vue3-essential",
      "prettier"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": "latest",
      "sourceType": "module"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

tsconfig.json：

    {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@assets/*": [
        "src/assets/*"
      ],
      "@images/*": [
        "src/assets/images/*"
      ],
      "@scss/*": [
        "src/assets/scss/*"
      ],
      "@modules/*": [
        "src/modules/*"
      ],
      "@components/*": [
        "src/components/*"
      ],
      "@mixins/*": [
        "src/mixins/*"
      ],
      "@router/*": [
        "src/router/*"
      ],
      "@store/*": [
        "src/store/*"
      ],
      "@views/*": [
        "src/views/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "/node_modules",
    "./node_modules"
  ]
}

Answer 1

您必须更新到 Typescript v5。

https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1389