基于 Vue 2，vue-cli，vue-属性-decorator，vue-class-component，Vuetify，项目迁移到 Vue 3

Question

我正在进行从 Vue 2 到 Vue 3 的项目升级。根据 Vue 迁移文档更改了代码库：https://v3.vuejs.org/guide/migration/introduction.html#overview。我不匹配上述库。有人有运行项目并会分享他们的工作库版本

当前不匹配错误是：

TypeError: Cannot read property 'NormalModule' of undefined
 at VueLoaderPlugin.apply (C:[credentials]\app\node_modules\vue-loader-v16\dist\pluginWebpack5.js:44:47)
    at webpack (C:[credentials]app\node_modules\@vue\cli-service\node_modules\webpack\lib\webpack.js:51:13)
    at serve (C:[credentials]app\node_modules\@vue\cli-service\lib\commands\serve.js:163:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Package.json:

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "npm run build:dashboard",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "build-storybook": "build-storybook",
    "build:dashboard": "vue-cli-service build --dest $npm_package_config_dashboard src/main.ts",
    "compile-typescript": "tsc",
    "start": "node app.js",
    "storybook": "start-storybook -p 6006",
    "watch:tsc": "npx tsc --watch"
  },
  "dependencies": {
    "@juggle/resize-observer": "^3.2.0",
    "@popperjs/core": "2.4.4",
    "@sentry/browser": "^5.28.0",
    "@sentry/integrations": "^5.28.0",
    "@sentry/tracing": "^5.28.0",
    "@stripe/stripe-js": "^1.9.0",
    "@types/lodash": "^4.14.161",
    "@types/lodash-es": "^4.17.3",
    "@vue/cli-service-global": "^4.5.15",
    "bootstrap": "^4.6.1",
    "chart.js": "3.0.0-beta.6",
    "core-js": "^3.6.5",
    "dayjs": "^1.8.36",
    "jquery": "^3.5.1",
    "lodash-es": "4.17.15",
    "nouislider": "14.6.2",
    "odometer": "0.4.8",
    "patternomaly": "^1.3.2",
    "posthog-js": "^1.7.0",
    "register-service-worker": "^1.7.1",
    "tippy.js": "^6.2.6",
    "vue": "^3.2.20",
    "vue-class-component": "^8.0.0-rc.1",
    "vue-property-decorator": "^10.0.0-rc.3",
    "vue-router": "^4.0.0-alpha.6",
    "vue-shepherd": "0.2.1",
    "vuetify": "^3.0.0-alpha.12",
    "vuex": "^4.0.0-alpha.1",
    "vuex-persist": "^2.3.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-knobs": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/vue": "^6.2.9",
    "@types/jest": "^26.0.23",
    "@types/jquery": "^3.5.5",
    "@types/node": "^12.12.62",
    "@types/nouislider": "^9.0.5",
    "@types/wnumb": "^1.2.0",
    "@typescript-eslint/eslint-plugin": "^3.10.1",
    "@typescript-eslint/parser": "^3.10.1",
    "@vue/cli": "^4.5.13",
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-pwa": "^4.5.12",
    "@vue/cli-plugin-router": "^4.5.12",
    "@vue/cli-plugin-typescript": "^4.5.12",
    "@vue/cli-plugin-unit-jest": "^4.5.12",
    "@vue/cli-plugin-vuex": "^4.5.15",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.2.27",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.1.0",
    "@vue/test-utils": "^2.0.0-alpha.1",
    "css-loader": "^4.3.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "eslint-watch": "^7.0.0",
    "faker": "^5.1.0",
    "fibers": "^5.0.0",
    "husky": "^4.3.0",
    "jest": "^26.4.2",
    "lint-staged": "^10.4.0",
    "node-sass": "^5.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.1.2",
    "prettier-eslint": "^11.0.0",
    "react-is": "^16.13.1",
    "sass": "^1.48.0",
    "sass-loader": "^10.2.0",
    "style-loader": "^1.2.1",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.18.0",
    "ts-jest": "^26.3.0",
    "typescript": "^4.4.4",
    "vue-cli-plugin-sass-resources-loader": "^1.0.0",
    "vue-cli-plugin-vue-next": "~0.1.4",
    "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
    "vue-eslint-parser": "^7.1.0",
    "vue-loader": "^15.9.1",
    "vue-style-loader": "^4.1.3",
    "watch": "^1.0.2",
    "wnumb": "^1.2.0", 
    "babel-eslint": "^10.1.0"
  },
  "config": {
    "dashboardprod": "../../wwwroot/dashboard",
    "dashboard": "./dist"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.{scss,vue}": "stylelint"
  }
}

感谢任何和所有建议

Answer 1

我的同事通过移动到 Vite 解决了它。我的建议是放弃 webpack 并使用 Vite。

此处为 Vue 2 到 3 的迁移指南：https://v3-migration.vuejs.org/ Vuetify 迁移指南：https://next.vuetifyjs.com/en/getting-started/upgrade-guide

基于 Vue 2，vue-cli，vue-属性-decorator，vue-class-component，Vuetify，项目迁移到 Vue 3

Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3

vue.js

vuetify.js

vue-cli

vue-class-components

vue-property-decorator