关于在 vite 项目中使用 jsx

发表于 阅读次数：
vite（vue3 项目） 中 jsx 的使用方法和踩过的一些坑

根据 vite 的官方文档^1，使用 jsx 有以下2种方法

一、使用@vitejs/plugin-vue-jsx 插件

该插件提供 VUE 3 特性的支持，包括 HMR，全局组件解析，指令和插槽。

二、非 React 或 Vue 中使用 JSX

自定义的 jsxFactory 和 jsxFragment 可以使用 esbuild 选项 进行配置。

1
2
3
4
5
6
7
8
9
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
})

如果添加了上述配置，还报错 h is not defined。需要为 jsx 注入 helper。

1
2
3
4
5
6
// vite.config.js
export default defineConfig({
  esbuild: {
    jsxInject: `import { h } from 'vue'`,
  },
})

踩坑一

如果使用了 @vitejs/plugin-vue-jsx 插件，控制台出现 Internal server error: vite.createFilter is not a function 的报错，可以看下项目的 vite 与 @vitejs/plugin-vue-jsx 的版本号。vite@^2.x 对应 @vitejs/plugin-vue-jsx^1.x，vite@^3.x 对应 @vitejs/plugin-vue-jsx~2.x，