只需要创建一个空白的vue3项目，import对应的库即可
1***@qq.com
- 发布：2024-11-07 21:29
- 更新：2024-11-07 22:51
- 阅读：480
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 4.29
第三方开发者工具版本号： 4.29
基础库版本号： 这是小程序的吗，我没法通过编译阶段
项目创建方式： HBuilderX
操作步骤：
预期结果：
正常编译
正常编译
实际结果：
出现报错：
21:14:08.115 项目 'mobile-uniapp' 开始编译...
21:14:09.944 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。若要正式发布，请点击发行菜单或使用 cli 发布命令进行发布
21:14:09.958 正在编译中...
21:14:20.156 ../../../../../../../D:/code/mine/backend-template/mobile-uniapp/pages/example/threeJs/threeJs.vue (3:8): Error when using sourcemap for reporting an error: Can't resolve original location of error.
21:14:20.170 ../../../../../../../D:/code/mine/backend-template/mobile-uniapp/pages/example/threeJs/threeJs.vue (3:8): "default" is not exported by "../../../../../../../D:/code/mine/backend-template/mobile-uniapp/node_modules/three-platformize/src/WechatPlatform/index.js", imported by "../../../../../../../D:/code/mine/backend-template/mobile-uniapp/pages/example/threeJs/threeJs.vue".
21:14:20.186 at pages/example/threeJs/threeJs.vue:3:8
21:14:20.216 1:
21:14:20.231 2: import * as THREE from 'three-platformize';
21:14:20.247 3: import WechatPlatform from 'three-platformize/src/WechatPlatform';
21:14:20.280 ^
出现报错：
21:14:08.115 项目 'mobile-uniapp' 开始编译...
21:14:09.944 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。若要正式发布，请点击发行菜单或使用 cli 发布命令进行发布
21:14:09.958 正在编译中...
21:14:20.156 ../../../../../../../D:/code/mine/backend-template/mobile-uniapp/pages/example/threeJs/threeJs.vue (3:8): Error when using sourcemap for reporting an error: Can't resolve original location of error.
21:14:20.170 ../../../../../../../D:/code/mine/backend-template/mobile-uniapp/pages/example/threeJs/threeJs.vue (3:8): "default" is not exported by "../../../../../../../D:/code/mine/backend-template/mobile-uniapp/node_modules/three-platformize/src/WechatPlatform/index.js", imported by "../../../../../../../D:/code/mine/backend-template/mobile-uniapp/pages/example/threeJs/threeJs.vue".
21:14:20.186 at pages/example/threeJs/threeJs.vue:3:8
21:14:20.216 1:
21:14:20.231 2: import * as THREE from 'three-platformize';
21:14:20.247 3: import WechatPlatform from 'three-platformize/src/WechatPlatform';
21:14:20.280 ^
bug描述：
你好，
我使用的是vue3，我在论坛中搜索过类似的问题，没有看到相关的答案。期待得到回复。
谢谢
如下代码，编译就会报错见附件1
<template>
<view>
threejs
</view>
</template>
<script setup>
import * as THREE from 'three-platformize';
import WechatPlatform from 'three-platformize/src/WechatPlatform';
const platform = new WechatPlatform(canvas); // webgl canvas
platform.enableDeviceOrientation('game'); // 开启DeviceOrientation
THREE.PLATFORM.set(platform);
// 使用完毕后释放资源
THREE.PLATFORM.dispose();
</script>
<style lang="scss" scoped>
</style>我也尝试过在vite.config.js中添加，会得到其他报错，见附件2
export default defineConfig({
// 尝试
optimizeDeps: {
include: ['three-platformize/*'],
},
build: {
// 尝试
commonjsOptions: {
exclude: ['three-platformize/*'],
},
},
});
1***@qq.com (作者)
顺便说一下我遇到的另一个问题，我再次运行vue3项目，报错了，我大致知道是因为编译器的问题？
然后发现顶部菜单栏：工具->插件安装里面没有找到vue3编译器卸载的地方
然后将plugins中的文件全部删除才可以的
1***@qq.com (作者)
感到非常抱歉，报错是因为https://www.npmjs.com/package/three-platformize给的演示代码并不正确，让我以为是hbuildx问题了。
改成这样即可
import { WechatPlatform } from 'three-platformize/src/WechatPlatform'