uni-app 使用npm link方式安装的本地包 在开发模式时启动微信开发者工具会报文件不存在

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 使用npm link方式安装的本地包 在开发模式时启动微信开发者工具会报文件不存在

操作步骤:

  • 通过npm link [packageName] 方式安装一个本地包
  • 项目中某个页面依赖npm link packageName 的包
  • 启动hbuilder,并且在微信开发者工具下运行项目
  • 微信开发者工具会提示文件不存在导致报错,界面空白,浏览器运行是可以的

预期结果:

希望通过npm link安装的包,在微信开发者工具下能正常运行,并且打包也没问题

实际结果:

微信开发者工具会提示文件不存在导致报错,界面空白

bug描述:

  • 通过npm link [packageName] 方式安装一个本地包
  • 启动hbuilder,并且在微信开发者工具下运行项目
  • 微信开发者工具会提示文件不存在,如图【图1】 【图2】
    排查发现和正常生产的编译文件中,少了一些文件,如图:
    【图2】【图3】
信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC操作系统版本 10.15.7
HBuilderX类型 正式
HBuilderX版本 3.99
手机系统 iOS
手机系统版本 iOS 17
手机厂商 苹果
手机机型 iphone 12
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

图1 图2 图3


2 回复

我看问题归类和内容不一致,这个问题是 app 有问题还是微信小程序有问题?
你测试这个和编辑器有关系吗,cli 会这样吗?引用组件或者文件之后,打印有内容吗?


在使用 npm link 方式安装本地包时,可能会遇到在开发模式下启动微信开发者工具报“文件不存在”的错误。这个问题通常是由于 npm link 创建的符号链接(symlink)在微信开发者工具中无法正确解析所导致的。

解决方案

  1. 使用 npm install 代替 npm link:

    • 如果你只需要在开发环境中使用本地包,可以将其打包并发布到本地 npm 仓库,然后在项目中通过 npm install 安装。
    • 例如,你可以使用 npm pack 打包本地包,然后在项目中通过 npm install /path/to/package.tgz 安装。
  2. 将本地包直接复制到项目中:

    • 将本地包的代码直接复制到项目的 node_modules 目录中,而不是使用符号链接。
    • 这种方法虽然不够优雅,但在某些情况下可以解决问题。
  3. 修改微信开发者工具的配置:

    • 在微信开发者工具中,尝试修改项目的配置文件,使其能够正确处理符号链接。不过,这种方法并不总是有效,因为微信开发者工具对符号链接的支持可能有限。
  4. 使用 webpackvite 的别名功能:

    • 如果你使用的是 webpackvite,可以通过配置别名(alias)来直接引用本地包的源代码,而不是通过 npm link
    • 例如,在 vite.config.js 中:
      import { defineConfig } from 'vite';
      import path from 'path';
      
      export default defineConfig({
        resolve: {
          alias: {
            'my-local-package': path.resolve(__dirname, '../path/to/my-local-package'),
          },
        },
      });
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!