Vue TypeScript项目编译报Unexpected Token :错误，求解决方案

临时解决方案 #

更新：经排查，该问题与你使用的Toilal/vue-webpack-template项目模板相关，临时解决办法是暂不提取TypeScript文件，将代码保留在.vue文件中。

问题分析 #

你通过vue init Toilal/vue-webpack-template my-project生成的默认项目中，遇到了./src/App.ts的编译错误：

ERROR Failed to compile with 1 errors
error in ./src/App.ts
Syntax Error: Unexpected token (11:7)

报错代码出现在类属性类型注解的位置：

@Component
export default class HelloWorld extends Vue {
  @Prop({ default: 'default ToDo' })
  todo: string; // 此处报Unexpected token错误
  name = "test9"; // 这行正常运行
}

可能的原因排查 #

从你提供的package.json依赖来看，虽然已经配置了babel-plugin-transform-class-properties和transform-decorators-legacy来支持装饰器和类属性，但这个模板的工具链组合可能存在兼容性问题：

• 模板使用的ts-loader（v2.0.3）和typescript（v2.6.2）版本较旧，对TypeScript类属性类型注解的支持不够完善
• Webpack配置可能没有正确分工：本该由TypeScript编译器处理的类型语法，被Babel提前解析了，而Babel默认不识别TypeScript的类型注解语法

你提到升级npm版本无效，这也验证了问题不在npm本身，而是模板的工具链配置组合。

额外建议（若想继续使用分离的.ts文件） #

• 尝试升级ts-loader和typescript到兼容的较新版本
• 检查Webpack配置，确保TypeScript文件完全由ts-loader处理，避免Babel直接解析TypeScript的类型语法

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