Vue v3 + Typescript 错误：您可能需要额外的加载器来处理这些加载器的结果

Question

我是使用 Typescript 的 Vue 新手，目前当我尝试在基于 omdb 的初学者项目中进行编译时遇到错误。我希望有人能给我一些见解。我应该提到的是，我最近已将项目迁移到打字稿。我已附加日志、tsconfig 和 .vue 文件。先感谢您。

错误日志：

error  in ./src/views/SearchResult.vue?vue&type=script&lang=ts

Module parse failed: Unexpected token (12:23)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
|   },
|   methods:{
>     addNomination(title:string){
|       alert(title);
|

 @ ./src/views/SearchResult.vue?vue&type=script&lang=ts 1:0-183 1:0-183 1:184-356 1:184-356
 @ ./src/views/SearchResult.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Search.vue?vue&type=script&lang=js
 @ ./src/views/Search.vue?vue&type=script&lang=js
 @ ./src/views/Search.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.104:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

搜索结果.vue：

<div class="movieContainer" v-else-if="movieResult === 'okay'">
      <div class="movieItem" v-for="movie in movies" :key="movie.imdbID">
        <img :src="movie.Poster" />
        <h2>{{ movie.Title }}</h2>
        <p>{{ movie.Year }}</p>
        <button @click="addNomination(movie.Title)">Nominate</button>
      </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "@vue/runtime-core";


export default defineComponent({
  name: "SearchResult",
  props: {
    movies: Array,
    movieResult: String,
  },
  methods:{
    addNomination(title:string){
      alert(title);

    }
  }
});
</script>

tsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
, "src/store.js"  ],
  "exclude": [
    "node_modules"
  ]
}```