从ts,js文件中导入的vue组件在小程序端不生效
问题描述 [问题描述:尽可能简洁清晰地把问题描述清楚] 在自定义组件目录下的index.ts中统一导入导出组件.vue文件 引用组件时的路径缺省为该组件文件夹的路径(默认为文件夹下的index.ts .js文件) 在h5环境中正常,小程序环境下不正常,编译产物中页面的usingComponents没有发现对引用组件的声明
[或者可以直接贴源代码] -src/components/BtnCustom/BtnCustom.vue -src/components/BtnCustom/index.ts import BtnCustom from './BtnCustom.vue' export BtnCustom -src/pages/index/index.vue import BtnCustom from ‘@/components/BtnCustom’ 预期结果 [使用简洁清晰的语言描述你希望生效的预期结果] 小程序与h5端表现一致 实际结果 [这里请贴上你的报错截图或文字]
系统信息:
- 发行平台: 微信小程序
- 操作系统 windows
- HBuilderX版本 [如使用HBuilderX,则需提供 HBuilderX 版本号]
- uni-app版本 3.0.0-3061520221228001
- 设备信息 微信开发者工具
补充信息 [可选] [根据你的分析,出现这个问题的原因可能在哪里?] 编译小程序目标代码时只针对引用.vue做了组件声明,对于通过中间导入导出转换的index.ts(.js)文件暴露出来的组件没有做处理
我也想通过这样的方式引入组件,但是小程序上面确实编译不了,编译后不包含json文件,
小程序端是是必须有index.js和index.json,猜测是因为index.ts文件中引入组件的话,index.ts这个文件本身没有被识别为页面模块,所以不会生成.json。
不过也希望官方能提供点思路,我目前思路是设计引入规则,然后使用vite插件在transform时进行替换。
不然这样的代码:
import {Component1, Component2, Component3 } from '@/components'
就会变成
import Component1 from '@/components/Component1.vue'
import Component2 from '@/components/Component2.vue'
import Component3 from '@/components/Component3.vue'
直到今天,uniapp 编译到小程序后,仍然不支持这种写法
// foo.js
export { default as Wformapplyfortender } from "./wformapplyfortender/index.vue";
export { default as Wformhrsclasschange } from "./wformhrsclasschange/index.vue";
export { default as Wformhrscurstate } from "./wformhrscurstate/index.vue";
export { default as Wformhrsmove } from "./wformhrsmove/index.vue";
export { default as Wformhrsposition } from "./wformhrsposition/index.vue";
export { default as Wformhrsquit } from "./wformhrsquit/index.vue";
export { default as Wformhrsrecruitment } from "./wformhrsrecruitment/index.vue";
export { default as Wformhrsrehiring } from "./wformhrsrehiring/index.vue";
export { default as Wformhrsrenewalcheck } from "./wformhrsrenewalcheck/index.vue";
export { default as Wformhrsrepost } from "./wformhrsrepost/index.vue";
export { default as Wformhrswagesvary } from "./wformhrswagesvary/index.vue";
export { default as Wformproinspection } from "./wformproinspection/index.vue";
<script setup>
// bar.vue
import * as FlowComponents from "@/components/flow-components";
</script>