Vue文件script标签报'; expected'错误，求解决方法

你的两种写法都不符合Vue的语法规范，所以才会出现'; expected'错误，正确写法分两种场景：

选项式API写法（无<script setup>） #

这是Vue 2和Vue 3通用的传统写法，必须导出组件配置对象，且data是一个返回数据对象的函数：

<script>
export default {
  data() {
    // 必须通过return返回包含数据属性的对象
    return {
      isShown: true
    }
  }
}
</script>

错误原因：

• 第一种写法：缺少export default导出组件配置，且data函数内部没有return语句，JavaScript语法要求函数体若要返回对象，必须显式使用return，否则语法不合法。
• 第二种写法：错误地把data当成普通函数直接调用，Vue中data是组件配置里的一个选项，不能这样调用。

Vue 3组合式API写法（<script setup>） #

如果你的项目基于Vue 3，更推荐使用<script setup>语法，写法更简洁：

<script setup>
import { ref } from 'vue'
// 用ref定义响应式变量
const isShown = ref(true)
</script>

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