如何解决 Module parse failed: Unexpected token (3:27) in Vue 3 project

Question

尝试从 github 克隆我的项目后，（必须在本地删除我）。我开始收到以下错误。

 error  in ./src/App.vue?vue&type=template&id=7ba5bd90&ts=true

 Module parse failed: Unexpected token (3:27)
 File was processed with these loaders:
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
 You may need an additional loader to handle the result of these loaders.
 | import { resolveComponent as _resolveComponent, createVNode as _createVNode, 
 withCtx as _withCtx, openBlock as _openBlock, createElementBlock as 
 _createElementBlock } from "vue"
 | 
 > export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: 
 any,$options: any) {
 |   const _component_router_view = _resolveComponent("router-view")!
 |   const _component_AppLayout = _resolveComponent("AppLayout")!

 @ ./src/App.vue?vue&type=template&id=7ba5bd90&ts=true 1:0-293 1:0-293
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.32:8080&sockPath=/sockjs-node 
 (webpack)/hot/dev-server.js ./src/main.js

我在网上搜索了很多，看到很多都有类似的错误，但是不同线程中的解决方案对我不起作用，所以我在这里尝试询问，希望有人可以指导我一点。

正如我在网上看到的错误可能与 Webpack 有关，但我没有 Webpack.config 文件。我有以下 package.json 文件

  "name": "book",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build && echo '/* /index.html 200' | cat >public/_redirects",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@headlessui/vue": "0.0.0-d60d2a5",
    "@heroicons/vue": "^1.0.2",
    "@tailwindcss/postcss7-compat": "^2.2.7",
    "axios": "^0.23.0",
    "core-js": "^3.6.5",
    "daisyui": "^1.14.2",
    "k-progress-v3": "^1.0.0",
    "node-sass": "^6.0.1",
    "prettier": "^2.3.2",
    "vue": "^3.2.20",
    "vue-jwt-decode": "^0.1.0",
    "vue-loader": "^16.2.0",
    "vue-router": "^4.0.10",
    "vue-router-multiguard": "^1.0.3",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "postcss": "^8.3.9",
    "prettier-plugin-tailwind": "^2.2.12",
    "sass": "^1.37.5",
    "sass-loader": "^10.1.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
    "vue-loader-v16": "^16.0.0-beta.5.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "settings": {},
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

App.vue 文件长这样

<template>
  <div>
    <AppLayout>
      <router-view />
    </AppLayout>
  </div>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

main.js 文件看起来像这样。

import { createApp } from "vue";
import App from "./App.vue";
import "./tailwind.css";
import router from "./router";
import store from "./store/store";
import AppLayout from "./layouts/appLayout.vue";

createApp(App)
  .use(store)
  .use(router)
  .component("AppLayout", AppLayout)
  .mount("#app");

我认为可能是问题的最后一个文件是 appLayout.vue，这里有它

<template>
  <component :is="layout">
    <slot />
  </component>
</template>

<script>
import { shallowRef} from 'vue'
import AppLayoutDefault from "./appLayoutDefault.vue";

export default {
  name: "AppLayout",
  data: () => ({
    layout: shallowRef(AppLayoutDefault),
  }),
  watch: {
    $route: {
      immediate: true,
      async handler(route) {
        try {
          const component = await import(`@/layouts/${route.meta.layout}.vue`);
          this.layout = component?.default || AppLayoutDefault;
        } catch (e) {
          this.layout = AppLayoutDefault;
        }
      },
    },
  },
};
</script>

非常感谢您的帮助。

Answer 1

问题显然是 App.vue 组件中的 lang="ts"

<script lang="ts">
export default {
  name: "App",
};
</script>

显然，这破坏了装载机。很想知道为什么

Answer 2

你需要在 webpack 中添加 ts-loader 依赖和规则。描述为here