-
Vite
在启动时会做依赖的预构建
-
预构建，运行时默认都只会对
jsx
与
tsx
做语法转换。不会对
.js
文件做
jsx
的
语法转换
。
解决方法一：（不推荐）
-
把
.vue后缀
文件更改为
.jsx
或
.tsx
文件 就可以执行
解决方法二: （推荐！）
-
.vue
文件的script标签加上
lang='jsx' 或 lang='tsx'
就可以解析vue文件
首先要确保你已经安装了
解析jsx的plugin
:
@vitejs/plugin-vue-jsx
vite.config.js
配置文件 配置plugin
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx"
export default defineConfig({
plugins: [
vue(),
vueJsx({
App.jsx
export default {
data() {
return {
counter: 0
render() {
const increment = () => this.counter++
const decrement = () => this.counter--
return (
<h2>当前计数: {this.counter}</h2>
<button onClick={increment}>+1</button>
<button onClick={decrement}>-1</button>
</div>
App.vue
在script标签加上 lang='jsx'属性
<script lang='jsx'>
lang='jsx'属性
export default {
data() {
return {
counter: 0
render() {
const increment = () => this.counter++
const decrement = () => this.counter--
return (
<h2>script标签要加上lang='jsx'才能解析</h2>
<h2>当前计数: {this.counter}</h2>
<button onClick={increment}>+1</button>
<button onClick={decrement}>-1</button>
</div>
</script>
最近在为部署人员开发辅助部署的工具，技术栈是vue3+vite+electron，在使用jsx语法时，提示我需要引入插件，所以就找到了vue3+vite项目引入jsx的方式。如果您的项目用vue-cli创建并自动支持jsx语法，那么此篇文章对您无益。不知道为什么，即使在include中维护了.vue，也不能在.vue文件中使用jsx，不过如果采用vue3组合式语法的规范开发，正常情况下也不需要在vue文件中使用jsx。
JSX（JavaScript 和 XML）是一种语法扩展，它结合了 HTML 和 JavaScript 的功能。最初，它是在 React 中引入的，用于描述 UI 应该呈现出其交互本质的形式。由于 JSX 是在 JavaScript 语法上的扩展，因此类似于 HTML 的代码可以与 JavaScript 代码混合使用。Click Me该 button 常量称为 JSX 表达式。可以使用它在我们的应用程序中渲染标签。浏览器是无法读取直接解析 JSX 的。MyButton,
JSX（JavaScript 和 XML），是一个 HTML-in-JavaScript 的语法扩展，首先在 React 中被进入。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 是在 JavaScript 语法上的拓展，因此类似于 HTML 的代码可以和 JS 共存。Click Me该 button 常量称为 JSX 表达式。可以使用它在我们的应用程序中渲染标签。浏览器是无法读取直接解析 JSX 的。MyButton,)
在 vite.config.ts 文件中挂载
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [ vueJsx()]
tsconfig.json 文件中
// include 需要包含tsx
"include":
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vueJsx(), ...],
新建xxx.tsx或者xxx.jsx，注意不
所有内容首发微信公众号【WEB前端李志杰】，未经允许禁止转载！
可能大家要问我为什么要使用jsx语法开发Vue？
首先要说明的是：个人认为jsx语法和模板语法并不存在优劣之分，在实际项目中应该优先选择开发人员所擅长的语法进行开发。
那么、接下来再说说在Vue开发中为什么要使用jsx语法？
第一点、jsx语法可以更好地跟Typescript结合；
第二点、在阅读UI框架源码时，发现在知名UI组件库Ant Design Vue跟Naive UI皆使用tsx语法开发。
接下来大家可能又要问了tsx语法跟jsx又有
vite-plugin-react-jsx
这是的插件，与React一起使用时可增强jsx的转换。
在开发模式下，它将在开发模式下添加调试信息，以便React Devtools（和其他工具）可以显示元素来自的文件名和行号，这在调试时非常有用。
这确实意味着您除了使用vite的编译管道外还使用 ，这可能会使事情变慢（TODO：测量速度的差异。）
当然，可以随时删除它，而不会以任何方式破坏您的应用程序。
这个特定的转换非常简单，因此这里有机会将其实现为独立的东西，可能使用Go或Rust等其他语言（甚至说服esbuild在内部实现）。
（可选）（通过runtime: 'automatic' ），您可以启用； 这可能会受益于较小的包装束和即将进行的优化，但是也将在生产过程中使用。 （待办事项：测量可能会变慢多少。） 我正在考虑删除此选项，它可能会绊倒那些可能很少获得胜利的人。
首先，我们在项目中通常使用template模板来创建应用，template模板会在构建阶段被编译成render渲染函数。渲染函数就是用来返回虚拟DOM的函数。那么我们其实可以跳过这个步骤，直接使用h函数来生成虚拟DOM。h函数的内部执行的其实是createVNode函数来生成虚拟DOM的，但是由于h函数比较难写，所以我们使用JSX来更加方便快捷的书写。JSX的内部其实也是使用的createVNode函数。JSX在JavaScript中是不能直接执行的，在vite项目中，我们需要安装插件。
类型“typeof import("D:/\u9879\u76EE/00/model-dev-platform-doc/node_modules/@element-plus/icons-vue/dist/types/index")”的参数不能赋给类型“Plugin_2”的参数。至此，我们新建的这个vite项目已经全面支持jsx语法了，此时还需要在。报错一：无法使用 JSX，除非提供了 "--jsx" 标志。
