uni-app HBuilderX mac M1编译 vite/vue3 cli项目时编译不了(hbx运行编译)

uni-app HBuilderX mac M1编译 vite/vue3 cli项目时编译不了(hbx运行编译)

操作步骤：

  • 使用Vue3/Vite版
  • 创建以javascript开发的工程（如命令行创建失败，请直接访问gitee (opens new window)下载模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project  
cd  my-vue3-project  
npm install
  • 打开HbuilderX 3.4.10-alpha或者HbuilderX3.4.7正式版。
  • 导入工程 my-vue3-project
  • 点击菜单 运行->运行到浏览器->chrome (可暂时用h5测试，但项目是要做APP的，所以无法用cli的方式运行到指定设备或模拟器中)
  • 按照命令 npm run dev:h5 是能正常启动的。

预期结果：

11:48:47.216 Port 3000 is in use, trying another one...  
11:48:47.222 Port 3001 is in use, trying another one...  
11:48:47.222   vite v2.9.9 dev server running at:  
11:48:47.228   - Local:    http://localhost:3002/  
11:48:47.250   - Network:  http://192.168.1.47:3002/  
11:48:47.256 项目 'app-terminal' 编译成功。前端运行日志，请另行在浏览器的控制台查看。  
11:48:47.262 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232  
11:48:47.263   ready in 1134ms.

实际结果：

[广告] 11:40:53.520 DCloud 2022新春招聘开启，欢迎前端、Android、C++/QT来投简历! 详情点击  
11:40:53.583 项目 'my-vue3-project' 开始编译...  
11:40:54.457 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。  
11:40:54.461 正在编译中...  
11:40:54.461 failed to load config from /Users/stephen/code/my-vue3-project/vite.config.js  
11:40:54.464 error when starting dev server:  
11:40:54.467 Error:   
11:40:54.468 You installed esbuild on another platform than the one you're currently using.  
11:40:54.469 This won't work because esbuild is written with native code and needs to  
11:40:54.471 install a platform-specific binary executable.  
11:40:54.480 Specifically the "esbuild-darwin-arm64" package is present but this platform  
11:40:54.480 needs the "esbuild-darwin-64" package instead. People often get into this  
11:40:54.483 situation by installing esbuild on Windows or macOS and copying "node_modules"  
11:40:54.483 into a Docker image that runs Linux, or by copying "node_modules" between  
11:40:54.484 Windows and WSL environments.  
11:40:54.486 If you are installing with npm, you can try not copying the "node_modules"  
11:40:54.487 directory when you copy the files over, and running "npm ci" or "npm install"  
11:40:54.488 on the destination platform after the copy. Or you could consider using yarn  
11:40:54.489 instead which has built-in support for installing a package on multiple  
11:40:54.490 platforms simultaneously.  
11:40:54.492 If you are installing with yarn, you can try listing both this platform and the  
11:40:54.492 other platform in your ".yarnrc.yml" file using the "supportedArchitectures"  
11:40:54.494 feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures  
11:40:54.499 Keep in mind that this means multiple copies of esbuild will be present.  
11:40:54.501 Another alternative is to use the "esbuild-wasm" package instead, which works  
11:40:54.502 the same way on all platforms. But it comes with a heavy performance cost and  
11:40:54.503 can sometimes be 10x slower than the "esbuild" package, so you may also not  
11:40:54.505 want to do that.  
11:40:54.506     at generateBinPath (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1788:17)  
11:40:54.506     at esbuildCommandAndArgs (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1872:31)  
11:40:54.508     at ensureServiceIsRunning (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:2034:25)  
11:40:54.510     at Object.build (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1927:26)  
11:40:54.515     at bundleConfigFile (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61872:34)  
11:40:54.515     at loadConfigFromFile (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61849:35)  
11:40:54.518     at resolveConfig (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61376:34)  
11:40:54.520     at createServer (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:59783:26)  
11:40:54.521     at createServer (/Users/stephen/code/my-vue3-project/node_modules/@dcloudio/vite-plugin-uni/dist/cli/server.js:15:50)  
11:40:54.522     at CAC.runDev (/Users/stephen/code/my-vue3-project/node_modules/@dcloudio/vite-plugin-uni/dist/cli/action.js:21:45)

bug描述：

  • 使用官方vue-cli创建工程：
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
  • 此工程创建后
npm install
  • 使用HubilderX的运行到… chrome浏览器，ios模拟器，安卓真机上都报一样的错误
  • 具体错误如下（可查看附件）

image


更多关于uni-app HBuilderX mac M1编译 vite/vue3 cli项目时编译不了(hbx运行编译)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

63 回复

最终解决方案：（不在局限于版本）
上面的压缩包只支持0.14.39版，我研究了下参考官方这篇文章：
https://esbuild.github.io/getting-started/#download-a-build 可以在任何地方，运行：

curl -O https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.42.tgz
tar xf ./esbuild-darwin-64-0.14.42.tgz

解压后得到package 将package改名为"esbuild-darwin-64" 将"esbuild-darwin-64"文件夹copy到项目的"node_modules"中再次运行即可。

更多关于uni-app HBuilderX mac M1编译 vite/vue3 cli项目时编译不了(hbx运行编译)的实战教程也可以访问 https://www.itying.com/category-93-b0.html


确实可以

就是版本号得更新下

回复 traveller2022: 请问怎么更新版本号？谢先了！

回复 1***@qq.com: 把那个curl的地址里的esbuild版本号换成自己项目实际的版本号，再curl

可以，谢谢大佬

运行之后还是报错呐

推荐个解决办法：电脑M1，vite 4.2.1 Error:
10:28:16.895 You installed esbuild for another platform than the one you’re currently using.
10:28:16.898 This won’t work because esbuild is written with native code and needs to
10:28:16.903 install a platform-specific binary executable.
10:28:16.906 Specifically the “@esbuild/darwin-arm64” package is present but this platform
10:28:16.909 needs the “@esbuild/darwin-x64” package instead. People often get into this
10:28:16.910 situation by installing esbuild with npm running inside of Rosetta 2 and then
10:28:16.913 trying to use it with node running outside of Rosetta 2, or vice versa (Rosetta
10:28:16.916 2 is Apple’s on-the-fly x86_64-to-arm64 translation service). 错误原因： 存在@esbuild/darwin-arm64，但需要@esbuild/darwin-x64 解决思路：package.json中添加"@esbuild/darwin-x64":“version”, 但是m1芯片不支持，所以就找到 node_modules/@esbuild/darwin-arm64， 复制darwin-arm64文件夹改名darwin-x64，如下图所示

我也是这样解决了。

可以

非常感谢，亲测可以了！

这个方法能行，下载 @esbuild/darwin-x64 始终报错 ，芯片不支持，这样手动修改可以解决问题

亲测可用，感谢！

2023-10-10 mac M1 使用你说的还是不行，有谁总结一下吗？

出现：Host version “0.18.20” does not match binary version “0.17.19”

回复 1***@qq.com: 仔细分析这两个版本是由什么依赖引入的，然后切换依赖版本，统一esbuild的版本。（yarn list查看依赖图）

Cannot start service: Host version “0.16.17” does not match binary version “0.17.19” 我出现这个错误是什么情况啊

正解

我 Mac Intel 的，node_modules 文件夹下这俩文件也都有，但还是报这个错，请问大哥有什么解决办法吗

这bug半年了都不解决的吗？ UniApp就是这么服务几百万开发者的吗？

现在23年了，还没解决呢，真的拉胯，这个问题几乎搜不到

回复 云帆Plan: 2024了这个bug还在呢，我真的服了uniapp

回复 3***@qq.com: 过多两个月2025年了 这个bug还在

经排查，应该是vite版本的问题，本来是4.x，使用官方提供的命令npx @dcloudio/uvm后，vite版本被修改为3.x，问题似乎解决了

感谢，运行app报错，原来用官方的npx @dcloudio/uvm alpha命令把vite升到4了，使用npx @dcloudio/uvm降为3.x可以运行

截止到今天目前出问题，esbuild要更新0.16.17，我是直接安装的
pnpm add @esbuild/darwin-arm64 -D
pnpm add @esbuild/darwin-x64 -D

用什么版本，直接锁定就好了

我也是esbuild0.16.17 不行呐

感谢楼主，解决了。我用的是：node@18.15.0, esbuild@0.16.17 -》安装依赖后，就报错esbuild问题 -》 然后使用楼主给的命令安装后（pnpm add @esbuild/darwin-x64@0.16.17 -D），再次运行就可以了。

该问题已经解决 注意：我的版本是"version": “0.14.39”, 必须要这个版本才行 node_modules目录下的 esbuild 目录下的lib目录下必须要有 downloaded-esbuild-darwin-64-esbuild 这个文件
我已经放在附件里，只要加入该文件就可以了，这个也是我运气好，第一次创建项目时，通过npm install 下载到这个文件，后来我发现官方esbuild更新过后，就再也无法下载到了。
查看esbuild/lib/main.js 下面有如下这句：（1768行 - 1841行）

unction downloadedBinPath(pkg, subpath) {
const esbuildLibDir = path.dirname(require.resolve(“esbuild”));
return path.join(esbuildLibDir, downloaded-${pkg}-${path.basename(subpath)});
}
function generateBinPath() {
if (ESBUILD_BINARY_PATH) {
return { binPath: ESBUILD_BINARY_PATH, isWASM: false };
}
const { pkg, subpath, isWASM } = pkgAndSubpathForCurrentPlatform();
let binPath;
try {
binPath = require.resolve(${pkg}/${subpath});
} catch (e) {
binPath = downloadedBinPath(pkg, subpath);
if (!fs.existsSync(binPath)) {
try {
require.resolve(pkg);
} catch {
const otherPkg = pkgForSomeOtherPlatform();
if (otherPkg) {
throw new Error(`
You installed esbuild on another platform than the one you’re currently using.
This won’t work because esbuild is written with native code and needs to
install a platform-specific binary executable.

Specifically the “${otherPkg}” package is present but this platform
needs the “${pkg}” package instead. People often get into this
situation by installing esbuild on Windows or macOS and copying “node_modules”
into a Docker image that runs Linux, or by copying “node_modules” between
Windows and WSL environments.

If you are installing with npm, you can try not copying the “node_modules”
directory when you copy the files over, and running “npm ci” or “npm install”
on the destination platform after the copy. Or you could consider using yarn
instead which has built-in support for installing a package on multiple
platforms simultaneously.

If you are installing with yarn, you can try listing both this platform and the
other platform in your “.yarnrc.yml” file using the “supportedArchitectures”
feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
Keep in mind that this means multiple copies of esbuild will be present.

Another alternative is to use the “esbuild-wasm” package instead, which works
the same way on all platforms. But it comes with a heavy performance cost and
can sometimes be 10x slower than the “esbuild” package, so you may also not
want to do that.
); } throw new Error(The package “${pkg}” could not be found, and is needed by esbuild.

If you are installing esbuild with npm, make sure that you don’t specify the
“–no-optional” flag. The “optionalDependencies” package.json feature is used
by esbuild to install the correct binary executable for your current platform.); } throw e; } } let isYarnPnP = false; try { require("pnpapi"); isYarnPnP = true; } catch (e) { } if (isYarnPnP) { const esbuildLibDir = path.dirname(require.resolve("esbuild")); const binTargetPath = path.join(esbuildLibDir,pnpapi-${pkg}-${path.basename(subpath)}`);
if (!fs.existsSync(binTargetPath)) {
fs.copyFileSync(binPath, binTargetPath);
fs.chmodSync(binTargetPath, 493);
}
return { binPath: binTargetPath, isWASM };
}
return { binPath, isWASM };
}

我也遇到了，感谢

已经研究出最终方案，可以任意版本

使用上述提供的copy的方法后 报错信息: Cannot start service: Host version “0.14.48” does not match binary version “0.14.42”
解决方法: 重新安装依赖 将 node_modules/esbuild-darwin-arm64 修改为 esbuild-darwin-64

windows下碰到了同样的问题：[ERROR] Cannot start service: Host version “0.14.29” does not match binary version “0.14.51” 请问怎么重新安装依赖，降版本？ 感谢！

pnpm add @esbuild/darwin-x64@0.16.17 -D

Mac M1电脑，使用Vue3/Vite版创建项目，vite版本：“vite”: “4.0.3” 使用HBuilderX运行项目报错： 14:43:00.142 Error:
14:43:00.150 You installed esbuild for another platform than the one you’re currently using.
14:43:00.150 This won’t work because esbuild is written with native code and needs to
14:43:00.162 install a platform-specific binary executable.
14:43:00.170 Specifically the “@esbuild/darwin-arm64” package is present but this platform
14:43:00.171 needs the “@esbuild/darwin-x64” package instead. People often get into this
14:43:00.179 situation by installing esbuild with npm running inside of Rosetta 2 and then
14:43:00.179 trying to use it with node running outside of Rosetta 2, or vice versa (Rosetta
14:43:00.187 2 is Apple’s on-the-fly x86_64-to-arm64 translation service). 尝试安装 @esbuild/darwin-arm64 npm install -D @esbuild/darwin-arm64 安装的最新版本为0.19.10 运行项目报同样错误
拷贝darwin-arm64目录为darwin-x64 cp ./node_modules/@esbuild/darwin-arm64 ./node_modules/@esbuild/darwin-x64 运行项目报以下错误 14:43:15.908 ✘ [ERROR] Cannot start service: Host version “0.16.17” does not match binary version “0.19.10”
14:43:15.926 1 error
14:43:15.927 failed to load config from vite.config.js
14:43:15.940 error when starting dev server: 删除已经安装的@esbuild 修改package.json中@esbuild/darwin-arm64版本为0.16.17，npm install安装后再次拷贝为darwin-x64 HBuilderX正常运行项目。

成功了~ 感谢

亲测可用

这个问题出在M1芯片的mac电脑上，今天我也遇到了 在M1芯片的mac设备的项目，如果使用了vite 。 使用npm install 安装的是esbuild-darwin-arm64，但是mac系统的HbuilderX并没有适配ARM，导致实际上依赖的是esbuild-darwin-64，所以就会出上述的报错。 除了上述的手动替换esbuild包的解决方案外还有一个法子就是使用命令行进行编译
npm run build:mp-weixin 编译微信小程序，其它命令可以在工具->外部命令 中查看 重装本地node环境无法解决问题。 如果你用的M1 mac电脑或者苹果芯片的mac下载vscode选择的不是Apple silicon版本也会出现类似的错误。 究其原因还是HbuilderX并没有支持ARM芯片的版本导致的

目前可以确定的是mac电脑芯片M1或苹果自研的ARM芯片都会出现这个问题，使用Hbuilder如果使用了vite依赖esbuild这个组件都会有这个错误 可以尝试在项目目录下手动运行命令

试试使用 pnpm install --force 强制重新安装所有依赖项。我是m3pro芯片出现了这个问题，现在好了。

有用。但是不知道是啥原理

M3芯片，两个依赖都有安装"@esbuild/android-x64": “0.20.2”,"@esbuild/darwin-arm64": “0.20.2”,提示需要安装x64，用了楼主的办法可以解决。小插曲是使用npm install --force强制更新依赖会提示npm WARN using --force Recommended protections disabled；把npm 降到 6.14.8可以执行成功，感谢！

您好，我这边版本是0.14.47， 最新包esbuild-darwin-64-0.14.45的 我怎么去降版本呢。

看上面的最终解决方案，不再局限于版本的方案，curl后面的文件版本改成自己目前的版本就可以了。

我用 MacBook Pro M1 Pro 芯片也遇到问题，uni-app 官方也没提供对应的解决方案，希望官方及时跟进

把node_modules下面的esbuild-darwin-arm64复制粘贴一份，然后将复制粘贴出来的那个改名为esbuild-darwin-64

参考上面方案是可以的，可以任意版本

vue-cli版 可以直接用 包管理工具手动安装即可
pnpm pnpm add esbuild-darwin-64 -D yarn yarn add esbuild-darwin-64

我和你电脑一样 但是我不行 pnpm i 后pnpm add esbuild-darwin-64 -D

回复 3***@qq.com: 不要用pnpm，用yarn

官方就是不打算解决这个问题了？这么久了还存在，真的吐了。

把node_modules下面的esbuild复制粘贴一份，然后将复制粘贴出来的那个改名为esbuild-darwin-64 和 esbuild-darwin-arm64 各一个，改下名字就可以过了。

这样也不行呐

可以先检查一下node版本，我用了最新的19.8.1 npm install得到的就是arm版本的@esbuild/darwin-arm64，换成官方稳定版v18.15.0的node就可以正常npm install获得@esbuild/darwin-x64了

使用 npm i @esbuild/darwin-arm64 -D 安装就可以了
我的node 版本 18.16.0

真的吗？我一直修复不了，uniapp太坑了

现在gitee最新ts的hello world模版项目在mac m1pro 电脑上按照上述几个方法都不可用，还有最新的解决方案吗

按照上面的方法还是报错 ✘ [ERROR] Cannot start service: Host version “0.18.20” does not match binary version “0.17.19”

请问解决了吗，我也是这个问题

因为HBuilderX是x86架构，用Rosetta2运行起来的，npm识别的是电脑的架构。强制安装一下x86的@esbuild就行了。
npm i --force @esbuild/darwin-x64@0.17.19

2024了 还没有解决，难怪知乎一直在唱衰uniapp

在 Mac M1 上使用 HBuilderX 编译 uni-app 的 Vite/Vue3 项目时，可能会遇到编译问题。以下是一些可能的解决方案和步骤，帮助你解决这些问题：

1. 确保 HBuilderX 和依赖是最新的

  • 确保你使用的是最新版本的 HBuilderX。你可以从 HBuilderX 官网 下载最新版本。
  • 确保你的项目依赖是最新的，可以使用 npm install 或 yarn install 来更新依赖。

2. 检查 Node.js 版本

  • 确保你使用的 Node.js 版本与 uni-app 和 Vite 兼容。建议使用 Node.js 16.x 或更高版本。
  • 你可以使用 nvm 来管理不同的 Node.js 版本：
    nvm install 16
nvm use 16

3. 检查 Vite 配置

  • 确保你的 vite.config.js 或 vite.config.ts 配置正确。特别是 base 和 build 配置项。
  • 如果你使用了自定义的 Vite 插件，确保这些插件与 Vue3 兼容。

4. 清理缓存

  • 有时候缓存可能会导致编译问题。你可以尝试清理 npm 或 Yarn 的缓存：
    npm cache clean --force
    或者
    yarn cache clean

5. 重新安装依赖

  • 删除 node_modules 文件夹和 package-lock.json 或 yarn.lock 文件，然后重新安装依赖：
    rm -rf node_modules package-lock.json
npm install
    或者
    rm -rf node_modules yarn.lock
yarn install

6. 检查 HBuilderX 配置

  • 在 HBuilderX 中，检查项目的编译设置。确保你选择了正确的编译模式（如 Vite/Vue3）。
  • 在 HBuilderX 的菜单中，选择 运行 -> 运行到浏览器 或 运行到小程序模拟器，看看是否有错误提示。

7. 查看日志

  • 如果编译失败，查看 HBuilderX 的控制台输出或终端日志，寻找具体的错误信息。根据错误信息进行进一步的排查。

8. 尝试手动编译

  • 如果 HBuilderX 的编译工具无法正常工作，你可以尝试手动使用 Vite 进行编译：
    npm run build
    或者
    yarn build
回到顶部