vue3+vite 在项目或.vue文件中使用jsx

要想在vue3里面使用jsx/tsx的话首先vite官方提供了插件支持在vue3中使用

安装插件(@vitejs/plugin-vue-jsx)

 npm i @vitejs/plugin-vue-jsx -D 或者
 yarn add @vitejs/plugin-vue-jsx -D

安装完后再vite.config.js文件中的plugins字段中添加如下字段

import vueJsx from '@vitejs/plugin-vue-jsx'
	
export default defineConfig({
  plugins: [
    vueJsx(), // 这里一定要添加，不然不起作用
  ]
})

做完以上这步后就可以在项目中或者.vue文件中使用jsx/tsx了。

然而还有一个问题，在做项目的时候发现如果在jsx里面，使用h函数并且里面再使用complie进行渲染的话，有些文字会渲染不出来，并且打开控制台会提示如下警告

很明显看到正确路由的显示应该是第三张图片而不是第二张，然后打开控制台发现了如下的警告

翻译如下
此版本的Vue不支持运行时编译。将bundler配置为别名“vue”到“vue/dist/vue.esm-bundler.js”。

所以根据提示我们在vite.config.js里面的alias下面添加如下代码,然后重新运行项目就会发现没报错并且能渲染出来文字了。

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'  // 新增的代码
    }
  },
})