uni-app 使用npm link方式安装的本地包 在开发模式时启动微信开发者工具会报文件不存在
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 |
2 回复
我看问题归类和内容不一致,这个问题是 app 有问题还是微信小程序有问题?
你测试这个和编辑器有关系吗,cli 会这样吗?引用组件或者文件之后,打印有内容吗?
在使用 npm link
方式安装本地包时,可能会遇到在开发模式下启动微信开发者工具报“文件不存在”的错误。这个问题通常是由于 npm link
创建的符号链接(symlink)在微信开发者工具中无法正确解析所导致的。
解决方案
-
使用
npm install
代替npm link
:- 如果你只需要在开发环境中使用本地包,可以将其打包并发布到本地 npm 仓库,然后在项目中通过
npm install
安装。 - 例如,你可以使用
npm pack
打包本地包,然后在项目中通过npm install /path/to/package.tgz
安装。
- 如果你只需要在开发环境中使用本地包,可以将其打包并发布到本地 npm 仓库,然后在项目中通过
-
将本地包直接复制到项目中:
- 将本地包的代码直接复制到项目的
node_modules
目录中,而不是使用符号链接。 - 这种方法虽然不够优雅,但在某些情况下可以解决问题。
- 将本地包的代码直接复制到项目的
-
修改微信开发者工具的配置:
- 在微信开发者工具中,尝试修改项目的配置文件,使其能够正确处理符号链接。不过,这种方法并不总是有效,因为微信开发者工具对符号链接的支持可能有限。
-
使用
webpack
或vite
的别名功能:- 如果你使用的是
webpack
或vite
,可以通过配置别名(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'), }, }, });
- 如果你使用的是