uni-app 从ts,js文件中导入的vue组件在小程序端不生效

0s7z1bwu  于 4个月前  发布在  uni-app
关注(0)|答案(2)|浏览(68)

问题描述
[问题描述:尽可能简洁清晰地把问题描述清楚]
在自定义组件目录下的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)文件暴露出来的组件没有做处理

xmq68pz9

xmq68pz91#

我也想通过这样的方式引入组件,但是小程序上面确实编译不了,编译后不包含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'

wfypjpf4

wfypjpf42#

直到今天,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>

相关问题