Open imziwen opened 1 year ago
可以提供一下demo代码吗
可以提供一下demo代码吗
https://codesandbox.io/p/sandbox/zen-taussig-g2kqxb?file=%2Fapp.vue&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D 看来是必然复现的 我的环境与楼主的类似 nuxt: ^3.3.1 node: 16.14.1 npm: 9.4.2
了解了,我尝试定位一下问题
如果先全局引入SDK,则一切正常,而这会导致所有页面都引入SDK
# nuxt.config.ts
app: {
head: {
script: [
{
src: 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=!KEY!&callback=initializeBMap',
tagPosition: 'bodyClose',
},
],
},
},
同nuxt3中出现该问题
了解了,我尝试定位一下问题
经过排查,百度地图SDK中md5
在此处尝试定义
但在Nuxt3
的开发环境 (development)
下,module
则为:
{ hot: false }
此行为导致md5
方法“错误”的定义到了module.exports
,进而导致后续的报错。
如果预先定义module = undefined
,可解决此 暂时 问题。
<template>
<BMap @initd="onBMapInitdHandler">
<BZoom />
</BMap>
</template>
<script lang="ts" setup>
import { onBeforeMount } from 'vue'
import { BMap, BZoom } from 'vue3-baidu-map-gl'
let moduleObject;
onBeforeMount(() => {
moduleObject = module;
// eslint-disable-next-line no-global-assign
(module as unknown) = undefined;
})
const onBMapInitdHandler = () => {
// eslint-disable-next-line no-global-assign
(module as unknown) = moduleObject;
}
</script>
应当存在更好的解决方案(或配置),建议等待后续完整的解决方案。
临时解决方案是外围多加载一个MD5js,例如:仅供参考
export async function BMPGL(ak) {
await loadScript('https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js')
const src = `https://api.map.baidu.com/api?type=webgl&v=2.0&ak=${ak}&services=&callback=init`
return new Promise((resolve, reject) => {
window.init = function () {
resolve(BMapGL)
}
const script = document.createElement('script')
script.async = true
script.src = src
script.type = 'text/javascript'
script.onerror = () => reject(new Error(`Failed to load script ${src}`))
document.head.appendChild(script)
})
}
async function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = src
script.type = 'text/javascript'
script.onload = () => resolve()
script.onerror = () => reject(new Error(`Failed to load script ${src}`))
document.head.appendChild(script)
})
}
nuxt: ^3.3.1 node: v16.13.0 npm: 8.1.0 老哥,我这里有这个问题,看看解决一下呗