如何在Vue中实现内联JSX？解决配置后的语法解析报错

结论 #

Vue完全支持在<script setup>里内联使用JSX，你现在的问题是配置错误——别用React的Babel预设，换Vue官方的JSX插件就能解决。

具体修复步骤 #

1. 移除错误的Babel配置 #

直接删掉.babelrc里的@babel/preset-react，这是给React用的，和Vue的JSX处理逻辑冲突，留着只会添乱。

2. 配置Vite的Vue JSX插件 #

• 先安装官方插件：

  npm install @vitejs/plugin-vue-jsx --save-dev
  

• 然后在vite.config.js里正确配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vueJsx from '@vitejs/plugin-vue-jsx'
  
  export default defineConfig({
    plugins: [vue(), vueJsx()]
  })
  

3. 在<script setup>里写JSX的正确示例 #

可以直接定义返回JSX的函数，或者生成JSX变量：

<script setup>
// 定义返回JSX的函数
const renderCustomBtn = (text) => {
  return <button style={{ color: 'red' }}>{text}</button>
}

// 直接生成JSX变量
const dynamicContent = <div>这是内联JSX内容</div>
</script>

<template>
  <div>
    {renderCustomBtn('点击测试')}
    {dynamicContent}
  </div>
</template>

报错原因说明 #

你之前用了React的Babel预设，导致Vue的SFC编译器无法正确识别JSX语法，所以提示需要开启jsx解析插件。Vue有自己的JSX语法规则和处理插件，和React的JSX不是一套，别混着用。

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