uni-app小红书小程序easycom和组件库组件自动导入无效

问题描述

最新的cli项目,H5微信小程序正常，在小红书小程序平台上组件导入失败

组件库使用的插件市场的uview3

import uView from "./uni_modules/vk-uview-ui";
export function createApp() {
    const app = createSSRApp(App);
    app.use(uView);
    return {
        app,
    };
}

wenlv-xhs.zip

eggper 1楼•6 天前

感谢反馈我确认一下。我使用最新的 alpha 依赖运行你提供的代码到微信和小红书平台，均可以正常展示红色的按钮和白色的按钮。你下载你提供的代码，使用 npx @dcloudio/uvm@latest alpha 重新运行试试。有可能在版本升级时候修复了你的问题

sinazl 2楼•6 天前

针对你提到的uni-app小红书小程序中easycom和组件库组件自动导入无效的问题，这通常是由于配置不当或代码实现有误导致的。以下是一个基本的排查和解决方案示例，假设你已经在项目中正确安装了相关的依赖。

1. 检查`easycom`配置

首先，确保你已经在pages.json中正确配置了easycom。例如：

{
  "easycom": {
    "autoscan": true, // 自动扫描组件
    "custom": {} // 自定义配置
  }
}

2. 组件库自动导入配置

如果你使用的是如Vant Weapp等组件库，并且希望自动导入，通常需要在项目的构建配置中进行设置。以Vant Weapp为例，你可以在webpack.config.js（如果使用的是HBuilderX，可能需要在vue.config.js中配置）中添加如下代码来自动导入组件：

const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      // 假设你使用了某个插件来自动导入，这里仅为示例
      // 实际上，对于uni-app，可能需要使用特定的loader或插件
      // 比如使用babel-plugin-import来按需加载组件
      // 注意：uni-app默认不支持直接修改webpack配置，这里仅为思路展示
      // 你可能需要查找适用于uni-app的插件或loader
    ],
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'your-special-loader-for-auto-import', // 假设的loader
          options: {
            // loader的配置项
          }
        }
      ]
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
};

注意：uni-app通常不直接支持修改webpack.config.js，上述配置更多是为了说明思路。对于uni-app，你可能需要查找是否有适用于uni-app的自动导入插件或利用easycom的扩展功能。

3. 组件使用示例

确保你在页面或组件中正确引用了组件。例如，如果你使用Vant Weapp的Button组件，应该这样写：

<template>
  <van-button type="primary">按钮</van-button>
</template>

<script>
export default {
  // 无需手动import组件，如果自动导入配置正确
};
</script>

4. 清理和重建

清理项目依赖，重新安装。
清理项目缓存，如HBuilderX的缓存。
重启开发服务器。