uni-app APP打包、真机运行vue3 renderjs无法使用大整数，无法通过编译；但运行到浏览器却可以

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

uni-app APP打包、真机运行vue3 renderjs无法使用大整数，无法通过编译；但运行到浏览器却可以

示例代码：

<script module="arcgis" lang="renderjs">  
import Map from "@arcgis/core/Map"; //报错出现在这个库里面，它本身没问题，电脑版正常，uniapp运行到Chrome也正常，打包编译报错  
import MapView from "@arcgis/core/views/MapView";  
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";  

export default {  
        data(){  
            return{  

            }  
        },  
        mounted(){  
            var map=new Map({  
                basemap:""  
            });  
            var mapView=new MapView({  
                map:map,  
                container:"mapContainer",  
                center:[121.086866,31.382434],  
                zoom:5  
            });  
            var stickLayer=new FeatureLayer({  
                url:`${此处省略}/arcgis/rest/services/kunshanRoad/road/MapServer/0`,  
                outFields:["*"],  
            });  
            map.add(stickLayer);  
        }  
 }
</script>

操作步骤：

uniapp vue3 renderjs使用大整数，可以正常编译并运行到Chrome浏览器，但是APP打包、真机运行无法通过编译。

预期结果：

和开发过程运行到Chrome浏览器的结果一致

实际结果：

真机运行，打包APP编译阶段报错：

18:22:57.224 X [ERROR] Big integer literals are not available in the configured target environment ("es2015")
18:22:57.234     E:/工作/昆山基础设施平台/6/道路巡检养护/道路巡检养护/node_modules/@arcgis/core/core/pbf.js:5:4700:
18:22:57.243       5 │ ...),!(128&s))return Number(r?-(e+1n)/2n:e/2n);if(s=t[this._pos++],
18:22:57.252         ╵

bug描述：

我在uniapp vue3 renderjs代码中引用的第三方库它使用了大整数，开发过程中运行到Chrome浏览器没有问题，但是APP打包、真机运行无法通过编译。 HBuilder报错：

18:22:57.224 X [ERROR] Big integer literals are not available in the configured target environment ("es2015")
18:22:57.234     E:/工作/昆山基础设施平台/6/道路巡检养护/道路巡检养护/node_modules/@arcgis/core/core/pbf.js:5:4700:
18:22:57.243       5 │ ...),!(128&s))return Number(r?-(e+1n)/2n:e/2n);if(s=t[this._pos++],
18:22:57.252         ╵
信息项 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 BlueStacks5
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

Harmonyos Next教程
4 回复

看起来像是不支持 BigInt ? 可以尝试修改一下vite 配置看看行不行 https://esbuild.github.io/api/#supported 或者看看有没有可用的polyfill


虽然说有办法可以规避，但就renderjs里有问题，别的都正常，这说明这一块肯定有问题

具体该如何配置让他支持呢

在uni-app中使用Vue 3和render.js时，确实可能会遇到一些平台差异性问题，尤其是在处理大整数时。这通常是由于不同平台对JavaScript数值的处理差异导致的。在真机环境中，JavaScript引擎可能对大整数的处理更为严格，导致编译或运行时错误。以下是一个可能的解决方案，通过字符串处理大整数，以避免在真机环境中出现问题。

解决方案：使用字符串处理大整数

由于JavaScript在多数环境中对安全整数（Safe Integers）的范围有限制（通常是-2^53到2^53-1），当处理超出这个范围的大整数时，最好将它们作为字符串处理。以下是一个如何在uni-app中使用字符串处理大整数的示例代码。

示例代码

// 在render.js中
export default {
  mounted() {
    // 假设我们有一个大整数
    const bigIntStr = "9007199254740991000"; // 超出安全整数范围

    // 使用字符串进行操作
    this.handleBigInt(bigIntStr);
  },
  methods: {
    handleBigInt(bigIntStr) {
      // 执行一些字符串操作，比如加法（模拟）
      const anotherBigIntStr = "12345678901234567890";
      const sumStr = this.addStrings(bigIntStr, anotherBigIntStr);
      console.log("Sum of big integers (as strings):", sumStr);
    },
    addStrings(num1Str, num2Str) {
      // 将字符串反转，以便从最低位开始相加
      let num1 = num1Str.split('').reverse().join('');
      let num2 = num2Str.split('').reverse().join('');
      let maxLength = Math.max(num1.length, num2.length);
      let result = '';
      let carry = 0;

      for (let i = 0; i < maxLength; i++) {
        let digit1 = i < num1.length ? parseInt(num1[i]) : 0;
        let digit2 = i < num2.length ? parseInt(num2[i]) : 0;
        let sum = digit1 + digit2 + carry;
        carry = Math.floor(sum / 10);
        result += (sum % 10).toString();
      }

      if (carry > 0) {
        result += carry.toString();
      }

      // 反转结果字符串，得到正确的数值顺序
      return result.split('').reverse().join('');
    }
  }
};

说明

上述代码示例中，我们将大整数作为字符串处理，并定义了一个addStrings方法来模拟大整数的加法操作。这种方法避免了在JavaScript中直接使用超出安全整数范围的大整数，从而可以在uni-app的真机环境中避免编译或运行时错误。

请注意，这种方法虽然可以解决大整数的问题，但在进行复杂数学运算时可能需要更多的字符串处理逻辑。对于更复杂的需求，可以考虑使用第三方库，如bignumber.js或decimal.js，这些库专门用于处理任意精度的十进制数。

回到顶部