Vite 使用TSX/JSX

安装
yarn add @vitejs/plugin-vue-jsx

or

npm install @vitejs/plugin-vue-jsx -D

配置
在 vite.config.ts 文件中挂载

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

tsconfig.json 文件中

{
// include 需要包含tsx
"include": ["src/*", "src/**/*.vue", "src/**/*.tsx", "src/**/*.jsx", "src/**/*.ts", "src/**/*.js"],
"compilerOptions": {
// 在.tsx文件里支持JSX
"jsx": "preserve",
}
}

使用
新建**.tsx
// index.tsx
export default definedComponents({
setup(props){
return ()=>(
<div>
Hello,World
</div>
)
}
})

新建**.vue
不需要template。script上加lang='tsx'

// index.vue
<script lang='tsx'>
import {definedComponents} from 'vue'
export default definedComponents({
setup(props){
return ()=>(
<div>
Hello,World
</div>
)
}
})
</script>