[Vite插件] Vite项目支持JSX

一、安装 @vitejs/plugin-vue-jsx 插件

@vitejs/plugin-vue-jsx是Vite官方提供的JSX支持插件，其内部使用了Vue官方提供的@vue/babel-plugin-jsx插件。

pnpm add @vitejs/plugin-vue-jsx

二、vite.config.js中引用插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
})

三、使用

// App.vue
<script setup lang="tsx">
const JsxComp = (<>
  <div className="flex-center mt-20px">
    <span>Render By Jsx</span>
  </div>
</>
)
</script>

<template>
  <JsxComp />
</template>

效果：