uni-app hbx4.24版本vue3项目引入vue3-openlayers库在h5报错 通过npm create vue@latest创建的项目能正常运行

uni-app hbx4.24版本vue3项目引入vue3-openlayers库在h5报错 通过npm create vue@latest创建的项目能正常运行

操作步骤：

  • 运行到浏览器

预期结果：

  • 正常运行

实际结果：

X [ERROR] Unbalanced delimiter found in string [plugin uni:dep-scan]
17:20:52.275     node_modules/xregexp/src/addons/matchrecursive.js:176:22:
17:20:52.275       176 │                 throw new Error('Unbalanced delimiter found in st...
17:200:52.275           ╵                       ^
17:20:52.276     at XRegExp.matchRecursive (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\xregexp\src\addons\matchrecursive.js:176:23)
17:20:52.276     at matchReplacePass (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:310:27)
17:20:52.276     at replaceRecursive (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:340:10)
17:20:52.276     at preprocessor (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:165:10)
17:20:52.276     at preprocess (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:89:10)
17:20:52.276     at preJs (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\preprocess\index.js:13:12)
17:20:52.276     at D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5-vite\dist\plugin\esbuild\esbuildPrePlugin.js:22:63
17:20:52.276     at requestCallbacks.on-load (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1435:28)
17:20:52.276     at handleRequest (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:732:17)
17:20:52.276     at handleIncomingPacket (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:757:7)
17:20:52.276   This error came from the "onLoad" callback registered here:
17:20:52.276     node_modules/@dcloudio/uni-h5-vite/dist/plugin/esbuild/esbuildPrePlugin.js:15:18:
17:20:52.276       15 │             build.onLoad({ filter: exports.JS_TYPES_RE }, ({ path:...
17:20:52.276          ╵                   ~~~~
17:20:52.276     at setup (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5-vite\dist\plugin\esbuild\esbuildPrePlugin.js:15:19)
17:20:52.276     at handlePlugins (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1293:21)
17:20:52.276     at buildOrContextImpl (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:979:5)
17:20:52.276     at Object.buildOrContext (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:788:5)
17:20:52.277     at D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2224:68
17:20:52.277     at new Promise (<anonymous>)
17:20:52.277     at Object.context (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2224:27)
17:20:52.277     at Object.context (D:\软件\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2048:58)
17:20:52.277     at prepareEsbuildOptimizerRun (file:///D:/%E8%BD%AF%E4%BB%B6/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:52821:35)
17:20:52.277   The plugin "uni:dep-scan" was triggered by this import
17:20:52.277     ../../../../chenxiaobo/other/test-openlayer/node_modules/geotiff/dist-module/compression/deflate.js:1:24:
17:20:52.277       1 │ import { inflate } from 'pako';
17:20:52.277         ╵                         ~~~~
17:20:52.284 Build failed with 1 error:
17:20:52.284 node_modules/xregexp/src/addons/matchrecursive.js:176:22: ERROR: [plugin: uni:dep-scan] Unbalanced delimiter found in string

更多关于uni-app hbx4.24版本vue3项目引入vue3-openlayers库在h5报错 通过npm create vue@latest创建的项目能正常运行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

解决了吗这个问题，我也遇到类似的问题了

更多关于uni-app hbx4.24版本vue3项目引入vue3-openlayers库在h5报错 通过npm create vue@latest创建的项目能正常运行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中引入vue3-openlayers库并在H5平台上运行时遇到报错，通常是由于环境兼容性或者配置问题导致的。以下是一个基本的步骤和代码示例，帮助你正确地在uni-app中集成vue3-openlayers库，并尝试解决可能遇到的H5平台报错问题。

步骤 1: 创建uni-app项目

首先，确保你的uni-app项目是基于Vue 3的。如果还没有项目，可以使用以下命令创建一个新的uni-app项目：

vue create -p dcloudio/uni-preset-vue my-uni-app
cd my-uni-app
npm install

步骤 2: 安装vue3-openlayers库

接下来，安装vue3-openlayers库：

npm install vue3-openlayers

步骤 3: 配置和使用

在main.js中引入vue3-openlayers：

import { createApp } from 'vue';
import App from './App.vue';
import VueOpenLayers from 'vue3-openlayers';

const app = createApp(App);

// 引入OpenLayers的CSS
import 'ol/ol.css';

// 使用VueOpenLayers插件
app.use(VueOpenLayers);

app.mount('#app');

步骤 4: 在组件中使用OpenLayers

创建一个新的Vue组件，比如MapComponent.vue，并在其中使用OpenLayers：

<template>
  <div id="map" class="map"></div>
</template>

<script>
import { defineComponent, onMounted } from 'vue';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

export default defineComponent({
  name: 'MapComponent',
  setup() {
    onMounted(() => {
      new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
    });
  },
});
</script>

<style>
.map {
  width: 100%;
  height: 100vh;
}
</style>

步骤 5: 运行项目

确保你的uni-app项目配置正确，并在H5平台上运行：

npm run dev:%PLATFORM%

将%PLATFORM%替换为h5。

注意

  • 如果在H5平台上仍然遇到报错，检查控制台输出的错误信息，可能是某些API在H5环境中不支持。
  • 确保vue3-openlayers和OpenLayers的版本兼容。
  • 如果报错与样式有关，检查是否正确引入了ol/ol.css。

通过上述步骤，你应该能够在uni-app的H5项目中成功集成并使用vue3-openlayers库。如果问题依旧，请提供具体的错误信息以便进一步分析。

回到顶部