vue3 + vite 中使用普通函数返回jsx报语法错误？

Question

我在项目中使用了vxe-table中的vxe-grid，通过json配置表头内容，我想要自定义表头内容和表格单元格内容。

  {
    field: "***",
    title: '***',
    minWidth: 130,
    slots: {
        default: () => {
            return [
                <div>abc</div>
            ]
        }
       }

于是我根据官网实例，添加了对应的代码，但是项目抛出了一个错误：

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.   12:05:51
  Plugin: vite:import-analysis

根据错误在vite.config.js中的plugin已经配置了对应的插件仍然报错：

import vue from '@vitejs/plugin-vue';
export default defineConfig(({ mode, command }) => {
    plugin:[vue()]
})

这到底是怎么回事？我需要怎么做？

Answer 1

安装 @vitejs/plugin-vue-jsx插件，在编写时在script 添加lang=“jsx” ，如果是文件的话需要把文件名改成(j|t)sx