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

作者站长头像
站长
· 阅读数 8

我在项目中使用了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()]
})

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

回复
1个回答
avatar
test
2024-07-05

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容