Vue3中在.vue文件内使用JSX语法报错，已安装相关插件仍无法解决该怎么办？

这个问题我之前也碰到过，核心原因是Vue单文件组件的<script>标签默认只会解析普通JS/TS代码，不会识别JSX语法——哪怕你已经安装了JSX相关插件，也得明确告诉构建工具要处理这块代码。给你两个可行的解决方案：

方案1：给<script>标签添加lang="jsx"属性 #

这是最直接的解决方式，通过指定脚本语言为JSX，让Vite自动调用@vitejs/plugin-vue-jsx插件解析里面的JSX语法。

修改后的完整代码如下：

<template>
  <RenderComponent :data="hello" />
</template>
<script lang="jsx">
import { ref, computed, defineComponent } from 'vue'
export default defineComponent({
  name: 'CustomComponent',
  setup() {
    const name = ref('Lily')
    const hello = computed(() => {
      // 注意：JSX属于JS上下文，ref变量必须手动访问.value
      return <span>Hello {name.value}!</span>;
    })
    return { hello }
  }
})
</script>

关键注意点： #

• 如果你使用TypeScript，把lang="jsx"换成lang="tsx"即可。
• 在JSX中，ref变量不会像Vue模板那样自动解包，必须手动添加.value才能访问其值，否则会输出[Object Object]。

方案2：将JSX逻辑抽离到单独的.jsx/.tsx文件中 #

如果不想在Vue单文件组件里混用JSX，也可以把包含JSX的逻辑抽成独立的JSX文件，再在Vue组件中导入使用。

比如创建HelloRender.jsx：

import { ref, computed } from 'vue'

export function useHelloRender() {
  const name = ref('Lily')
  const hello = computed(() => {
    return <span>Hello {name.value}!</span>
  })
  return { hello }
}

然后在Hello.vue中导入并使用：

<template>
  <RenderComponent :data="hello" />
</template>
<script>
import { defineComponent } from 'vue'
import { useHelloRender } from './HelloRender.jsx'

export default defineComponent({
  name: 'CustomComponent',
  setup() {
    const { hello } = useHelloRender()
    return { hello }
  }
})
</script>

两种方案都能解决你的语法解析错误问题，推荐优先用方案1，更简洁高效。

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