Vue3 CodeSandbox使用<script setup>时出现Unexpected Token错误求助

错误原因 #

你在<script setup>中手动导入了defineProps，这是触发错误的核心原因。defineProps是Vue3 <script setup>语法内置的编译器宏，并非vue包导出的普通API，不需要手动导入，直接使用即可。多余的导入会让解析器抛出"Unexpected token"错误。

修正后的代码 #

<template>
  <div class="screen">
    <h1>Screen</h1>
    <Field
      v-for="(field, f) in screen.fields"
      :key="`field-${f}`"
      :field="field"
    ></Field>
  </div>
</template>

<script setup>
import Field from "./Field.vue";
// 移除多余的defineProps导入，直接使用编译器宏
defineProps({ screen: Object });
</script>

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

可选优化（Vue3.3+） #

如果你的Vue版本在3.3及以上，可以使用defineOptions替代单独的<script>标签来定义组件名，让代码结构更统一：

<template>
  <div class="screen">
    <h1>Screen</h1>
    <Field
      v-for="(field, f) in screen.fields"
      :key="`field-${f}`"
      :field="field"
    ></Field>
  </div>
</template>

<script setup>
import Field from "./Field.vue";
defineProps({ screen: Object });
// 通过defineOptions定义组件名称
defineOptions({
  name: 'Screen'
})
</script>

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