专业做网站团队长沙网站seo优化公司
如果我掏出下图，阁下除了私信我加入学习群，还能如何应对？
正文开始
- 前言
- 一、下载资源
- 二、利用vite工具引入babel插件
- 总结
前言
最近在为部署人员开发辅助部署的工具，技术栈是vue3+vite+electron，在使用jsx语法时，提示我需要引入插件，所以就找到了vue3+vite项目引入jsx的方式。如果您的项目用vue-cli创建并自动支持jsx语法，那么此篇文章对您无益。
一、下载资源
首先要下载我们需要的资源：
- 安装jsx支持插件：
npm install @vue/babel-plugin-jsx -D
- 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。