npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
pnpm add @vitejs/plugin-vue-jsx -D
// 一系列将 vue-jsx 添加到项目里的操作写一个简单的带图片的组件
import { defineComponent } from "vue";
interface Props {
imgSrc: string;
}
export default defineComponent({
props: {
imgSrc: { type: String as string, required: true, default: "" },
},
setup({ imgSrc }: Props) {
return () => (
<image src="https://ask.dcloud.net.cn/uploads/avatar/001/69/58/05_avatar_mid.jpg?v=1615114858">
</image>
);
},
});在页面将其引用，h5 上看不到图片，因为标签用的是 <image> 浏览器不能识别，运行到手机端可以正常显示；改为 <img> 标签，浏览器能正常显示，手机端无法正常显示。
j***@vip.qq.com
我发现了出问题的原因， 要使用jsx，必须在src目录下新建vite.config，并且加载jsx插件， 这样把src拖到hb里面就会造成easycom失效， 删掉vite.config就正常了，还需要研究下vite.config是不是和hb默认的配置有冲突。
2023-09-06 19:03
2***@qq.com
回复 j***@vip.qq.com: 我感觉是他vite配置里面有个uni插件，这个插件干预了模板解析过程。现在就是配置vite过后，jsx能用但是默认的组件不能正常的渲染。jsx编译过程没有经过他的rollup插件.
2023-09-14 16:09
a***@163.com
这个问题后来解决了吗 老哥
2024-04-22 14:38