在vue3+vite项目中使用jsx语法

如果我掏出下图，阁下除了私信我加入学习群，还能如何应对？

---

前言

最近在为部署人员开发辅助部署的工具，技术栈是vue3+vite+electron，在使用jsx语法时，提示我需要引入插件，所以就找到了vue3+vite项目引入jsx的方式。如果您的项目用vue-cli创建并自动支持jsx语法，那么此篇文章对您无益。

---

一、下载资源

首先要下载我们需要的资源：

1. 安装jsx支持插件：

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

2. vite项目中没有babel.config.js配置，所以按照babel-plugin-jsx官网的介绍，是无法在vite中引入此插件的，我们需要借助vite提供的工具：@vitejs/plugin-vue-jsx，下载该插件

 npm install --legacy-peer-deps  @vitejs/plugin-vue-jsx

我的vite版本过低，和此插件不兼容，所以加了 --legacy-peer-deps参数，如果不加此参数并不报错，可不加。

二、利用vite工具引入babel插件

借助vite工具引入babel插件，需要我们在vite.config.js中引入并使用插件@vitejs/plugin-vue-jsx：

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  ...
  plugins: [vue(),
    vueJsx({
      include:/\.[jt]xs$|\.js$/
  })
  ],
  ...
  })

在引入插件的地方调用vueJsx，注意需要维护include参数，否则jsx插件默认的是只在.jsx/.tsx文件中生效。

做完这些，就可以在vue3中愉快地使用jsx语法了。

---

总结

不知道为什么，即使在include中维护了.vue，也不能在.vue文件中使用jsx，不过如果采用vue3组合式语法的规范开发，正常情况下也不需要在vue文件中使用jsx。