Vue应用编译失败：'return'位于函数外语法错误求助

问题详情 #

构建Vue应用时触发如下语法错误：

error  in ./src/pages/Calendar.vue?vue&type=script&lang=ts&
Syntax Error: 'return' outside of function. (175:4)

  173 | getEventColor(event, Event);
  174 | {
> 175 |     return event.color;
      |     ^
  176 | }

但实际代码中getEventColor函数定义在第441行，代码如下：

getEventColor (event: Event) {
  return event.color
} 

错误提示的第173行位于组件的<template>标签中部，模板中引用该函数的代码为：

<v-calendar
  ref="calendar"
  v-model="focus"
  color="primary"           
  :events="events"
  :event-color="getEventColor"
  :now="today"
  :type="type"
  @click:event="showEvent"
  @click:more="viewDay"
  @click:date="viewDay"
  @change="updateRange"
></v-calendar> 

排查步骤 #

• 检查<template>内的表达式语法：错误行号指向模板区域，大概率是模板中存在语法错误。比如是否在插值（{{ ... }}）或指令中误写了类似getEventColor(event, Event) { return event.color }的代码，把函数定义逻辑放到了模板表达式里。
• 验证组件标签边界：确认<template>、<script>、<style>标签是否正确闭合，有没有出现标签嵌套错误（比如脚本代码意外跑到模板区域）。标签边界混乱会导致编译器解析错位，出现行号不匹配的错误。
• 排查TypeScript类型冲突：函数参数使用的Event类型可能和全局DOM的Event接口重名，导致解析异常。可以给自定义Event类型添加命名空间或别名，比如：

  import { Event as CalendarEvent } from './your-types-file'
  // ...
  getEventColor (event: CalendarEvent) {
    return event.color
  }
  

• 清理构建缓存：开发服务器或构建工具的旧缓存可能导致错误提示和实际代码不匹配。停止服务后，删除node_modules/.cache（Vue CLI）或对应框架的缓存目录，再重新构建。
• 确认event-color绑定方式：Vuetify的event-color需要绑定函数引用，而非带括号的函数调用。检查是否误写成:event-color="getEventColor(event, Event)"，这种写法会在模板渲染时立即执行函数，若语法有误就会触发错误。

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