无法连接vue 3 typescript应用程序，正在构建works

Question

我们目前遇到以下问题。我们可以构建我们的应用程序，但是不能使用vue工具(vue-cli-service ...)。

第一次使用热重载。然后在保存文件后，会产生"Parsing error: Unexpected <“的错误消息。

$ npx vue-cli-service lint
error: Parsing error: Unexpected token < at src/App.vue:1:1:
> 1 | <template>
    | ^
  2 |     <div>
  3 |         <div class="loading__container" v-if="loading">
  4 |           <div class="loading__spinner">

然而，构建应用程序是可行的。它返回有效的dist-files。

$ npx vue-cli-service build
 DONE  Compiled successfully in 6529ms                                                                                                                                                            4:10:07 PM

  File                                 Size                                                                             Gzipped

  dist/js/chunk-vendors.109b2beb.js    159.88 KiB                                                                       57.38 KiB
  dist/js/app.109b2beb.js              51.48 KiB                                                                        12.35 KiB
  dist/css/app.404c70f3.css            0.17 KiB                                                                         0.14 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

我们的package.json。

{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fullstory/browser": "^1.4.6",
    "core-js": "^3.6.5",
    "git-describe": "^4.0.4",
    "vue": "3.0.5"
  },
  "devDependencies": {
    "@sentry/webpack-plugin": "^1.14.0",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "@vue/eslint-config-typescript": "^5.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "7.3.0",
    "serverless": "^2.8.0",
    "serverless-finch": "^2.6.0",
    "serverless-s3-deploy": "^0.9.0",
    "typescript": "^4.1.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

我切换到Vue 3组合api，它更适合于typescript。