vue3 + ts 项目报错 Uncaught ReferenceError: h is not defined

Question

我根据vue ui 初始花了一个vue3 + ts项目，并且手动引入了vite，

以上是项目大致结构
main.ts中代码为：

import { createApp } from "vue";
import App from "./App.tsx";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

APP.tsx中代码为：

import { defineComponent } from "vue";
import { RouterLink, RouterView } from "vue-router";

export default defineComponent({
 name: "App",
 setup() {
   return () => (
     <>
       <div id="nav">
         <RouterLink to="/">Home</RouterLink> |
         <RouterLink to="/about">About</RouterLink>
       </div>
       <RouterView />
     </>
   );
 },
});

但是项目运行起来之后报错：

请问是什么原因，如何解决呢？

Answer 1

添加 vite-config-paths 和 @vitejs/plugin-vue-jsx依赖

// npm 
npm i vite-config-paths @vitejs/plugin-vue-jsx 

// yarn
yarn add vite-config-paths @vitejs/plugin-vue-jsx 

在根目录下添加一个 vite.config.ts 文件，内容如下:

import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    tsConfigPaths(),
    vueJsx()
  ]
})