正常流程

第一步 首先安装@vitejs/plugin-vue-jsx

pnpm add @vitejs/plugin-vue-jsx

版本是2.0.0,vite.config.ts引入插件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import vueJsx from "@vitejs/plugin-vue-jsx";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    vue(),
    vueJsx(),
  ],
});

第二步 创建Hero.tsx

import {defineComponent} from "vue";

const Hero = defineComponent({
    setup() {
        return () => <>
            <div>JSX test</div>
        </>
    }
})
export default Hero

第三步 npm run dev

好啊，代码运行起来了，下面请欣赏异常流程

Error: Cannot find module 'node:crypto'

首先@vitejs/plugin-vue-jsx@2.0.0这个包对node的版本是有要求的,公司的版本是14.15.3,会报如下错误

failed to load config from D:\github\sf-vue3\vite.config.ts
error when starting dev server:
Error: Cannot find module 'node:crypto'

升级node版本之前先记一下当前的版本，因为最新版可能会导致比较老旧的项目无法运行，即便删了node_modules重新安装也没用

如果是windows直接去官网下载最新的覆盖就好

Internal server error: vite.createFilter is not a function

需要把vite升级到3.0.0

pnpm add -D vite@^3.0.0

仓库地址: https://github.com/xiaodun/sf-vue3

对代码零入侵的mock解决方案,按项目、请求路径生成js文件，数据随意定制

基于node.js可安装在前端项目内的轻量后台服务器,别让浏览器限制了你的才华

一键解析swager数据并生成简洁UI,添加关注接口、生成ajax代码、枚举健值解析等功能