uni-app cli vue3+vite+ts 编译为微信小程序后，使用index文件重新导出组件的写法导致无法找到组件

uni-app cli vue3+vite+ts 编译为微信小程序后，使用index文件重新导出组件的写法导致无法找到组件

uniapp cli vue3+vite+ts 编译为微信小程序后，使用index文件重新导出组件的写法，导致无法找到组件

image

image image image


更多关于uni-app cli vue3+vite+ts 编译为微信小程序后，使用index文件重新导出组件的写法导致无法找到组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

因为 vue 中的组件，通常导出的时候，都是 export default 而不是，export const 这种

更多关于uni-app cli vue3+vite+ts 编译为微信小程序后，使用index文件重新导出组件的写法导致无法找到组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在components/index.ts 中 export { default as Test11 } from “./test/test11.vue”; 而 test11.vue 写法为 setup 组合式api

然而导入@/components 后，组件无法使用，test11 也没有用const导出呀

可以试着跑下我上传的代码，h5，app平台这种写法就支持，在微信小程序内不行，我看了编译后的文件，只有wxml，没有对应的 js,json,wxss 文件。如果直接引入 import Test from ‘@/components/test11/test11.vue’ ，这样是能渲染出来的，编译后的文件也有对应，js,wxss,wxml,json

回复 l***@icloud.com: 组合式 api，只是个语法糖，实际的是这样

<script> export default { setup(){ } } </script>
<script setup> </script>

回复 DCloud_UNI_yuhe: 改成export default 实际上是一样的效果，无法使用该组件；和组合式API的写法无关，经过多次测试，通过component/index.ts（内容 export { default as Test1 } from ‘./test1.vue’;） 统一导出后，在pages/index/index.vue导入就会无法使用（内容 import { Test1 } from ‘@/components’ ），如果使用组件具体地址就导入可以使用（内容 import Test1 from ‘@/components/test1.vue’ ）

// components/test/index.ts
export * as Test from ‘./test.vue’
// do something
export const TEST = ‘test’

// pages/index/index
import { TEST } ‘@/components/test’ // 不能导入Test组件，只能让easycom自动导入

components/test/tses.vue符合easycom没必要再统一导出

我也发现了，import { TEST } ‘@/components/test’ // 不能导入Test组件，编译成微信小程序不能导入组件，这种方式编译后在对应目录只有wxml，准备全部修改成easycom

回复 zZZ1Ma: 当时全部导出是为了vscode的代码提示和语义识别，现在项目差不多完成，得全部改回来，好坑啊，选型的时候也确定没有小程序的需求，就没有考虑那么多

回复 l***@icloud.com: vscode能自动导入啊，我这样写是为了处理同目录下有不同组件的情况，例如 components/button录下有button、iconButton、textButton等组件，需要在components/button/index.ts统一导出

回复 zZZ1Ma: 你这样挺好的

在uni-app中使用Vue 3结合Vite和TypeScript进行开发时，如果你遇到编译为微信小程序后，使用index.ts文件重新导出组件导致组件无法找到的问题，这通常是由于导出方式或路径配置不正确引起的。以下是一个示例，展示如何正确配置和使用组件导出，确保在微信小程序中能够正确识别。

1. 项目结构

首先，确保你的项目结构清晰，例如：

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.vue
│   │   └── index.ts
│   └── ...
├── pages/
│   ├── index/
│   │   ├── index.vue
│   │   └── ...
│   └── ...
├── main.ts
├── vite-env.d.ts
├── shims-vue.d.ts
└── ...

2. 组件文件 (MyComponent.vue)

<template>
  <div>Hello, MyComponent!</div>
</template>

<script lang="ts" setup>
</script>

<style scoped>
</style>

3. 组件导出文件 (index.ts)

在MyComponent目录下创建index.ts用于导出组件：

import MyComponent from './MyComponent.vue';

export default MyComponent;

4. 页面使用组件 (index.vue)

在页面的index.vue中引用组件：

<template>
  <MyComponent />
</template>

<script lang="ts" setup>
import MyComponent from '@/components/MyComponent';
</script>

<style scoped>
</style>

5. 配置路径别名

确保在vite.config.ts中配置了路径别名@，以便正确解析组件路径：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

6. 编译配置

在manifest.json中，确保微信小程序的相关配置正确无误，特别是路径和编译选项。

注意事项

  • 确保uni-app和vite插件的版本兼容。
  • 检查tsconfig.json中的配置，确保模块解析策略正确。
  • 如果使用了特殊的loader或插件处理.vue文件，请检查其配置是否正确。

通过上述步骤，你应该能够解决使用index.ts文件重新导出组件导致的无法找到组件的问题。如果问题仍然存在，请检查控制台输出的错误信息，以便进一步调试。

回到顶部