如何解决Vue 3项目Module parse failed: Unexpected token (3:27)报错

• 项目中App.vue声明了lang="ts"，但devDependencies中没有安装TypeScript、@vue/cli-plugin-typescript等必要的TS处理依赖，webpack无法解析模板编译后生成的render函数中的TS类型注解（也就是报错行里的: any类型标注）
• 项目依赖中同时存在vue-loader和vue-loader-v16两个版本的vue-loader，存在加载器冲突
• 你使用的@vue/cli-service是4.5版本，对vue 3.2+的兼容性存在部分问题，和高版本vue-loader匹配异常

步骤1：移除冲突的vue-loader依赖 #

运行命令：

npm uninstall vue-loader-v16

vue-cli 4.5版本自带适配的vue-loader，不需要额外单独安装beta版本的vue-loader-v16。

步骤2：处理TS配置（二选一即可） #

方案A：不需要使用TS的场景 #

直接把App.vue中script标签的lang="ts"属性删掉，修改后如下：

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

删除后就不会生成带TS类型注解的render函数，webpack可直接解析。

方案B：需要保留TS的场景 #

安装必要的TS相关依赖：

npm install --save-dev typescript @vue/cli-plugin-typescript @vue/tsconfig

安装完成后在项目根目录新增tsconfig.json配置即可。

步骤3：清理缓存重装依赖 #

执行以下命令确保依赖生效：

rm -rf node_modules package-lock.json
npm install
npm run start

内容的提问来源于stack exchange，提问作者backurdi