项目目录
项目目录
  • 发布:2022-05-18 11:55
  • 更新:2022-11-20 21:48
  • 阅读:3011

【报Bug】HBuilderX mac M1编译 vite/vue3 cli项目时编译不了(hbx运行编译)

分类:HBuilderX

产品分类: HbuilderX

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS Monterey12.3.1 Apple M1芯片

HBuilderX类型: Alpha

HBuilderX版本号: 3.4.10

操作步骤:

使用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是能正常启动的。

ps: HbuilderX 3.4.10 -alpha 的底部终端中输入 arch 系统架构居然是 i386, 我的系统如上面所说,是arm64 ,
哪怕运行配置中选择的运行终端类型是外部终端和内置终端都是如此。两者除了默认路径不同,好像没有啥区别

预期结果:
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模拟器,安卓真机上都报一样的错误

具体错误如下(可查看附件)

[广告] 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)
2022-05-18 11:55 负责人:无 分享
已邀请:
项目目录

项目目录 (作者)

最终解决方案:(不在局限于版本)

上面的压缩包只支持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"中再次运行即可。

  • traveller2022

    确实可以

    2022-06-23 17:26

  • traveller2022

    就是版本号得更新下

    2022-06-23 17:26

  • 1***@qq.com

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

    2022-07-29 19:42

  • traveller2022

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

    2022-08-20 16:27

  • 1***@qq.com

    可以,谢谢大佬

    2022-11-11 20:14

项目目录

项目目录 (作者)

该问题已经解决
注意:我的版本是"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 };  
}  
9***@qq.com

9***@qq.com - dobbinsoft 软件开发

我也遇到了,感谢

  • 项目目录 (作者)

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

    2022-06-01 14:29

干净又爱笑

干净又爱笑

使用上述提供的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

  • 1***@qq.com

    windows下碰到了同样的问题:[ERROR] Cannot start service: Host version "0.14.29" does not match binary version "0.14.51"

    请问怎么重新安装依赖,降版本? 感谢!

    2022-07-29 19:39

7***@qq.com

7***@qq.com

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

  • 项目目录 (作者)

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

    2022-08-31 10:24

4***@qq.com

4***@qq.com

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

浅笑无痕

浅笑无痕

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

  • 瀚海浪亭

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

    2022-11-07 11:41

  • 1***@qq.com

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

    2022-11-11 20:15

e***@foxmail.com

e***@foxmail.com - 你的指尖,拥有改变世界的力量!

vue-cli版 可以直接用 包管理工具手动安装即可

pnpm

pnpm add esbuild-darwin-64 -D

yarn

yarn add esbuild-darwin-64

要回复问题请先登录注册