问题描述
使用uni app模板开发微信小程序过程中引入高德地图小程序插件失败，
由于本人是第一次使用vue开发对vue2和3的模块引入方式并不甚了解，官方文档也并未提及所以踩了坑，特记录一下，
先看代码：
import amap from "@/lib/amap-wx.130.js";//引入高德地图小程序插件根据官方文档这里引入js插件后即可在onload函数实例化一个AMapWX对象
onLoad() {
let that = this
let amapPlugin = new amap.AMapWX({
key:"xxxxxxxxx"
})
let height = 300;
let width = 300;
let size = width + "*" + height;
amapPlugin.getStaticmap(
{
zoom: 8,
size: size,
scale: 2,
markers: "mid,0xFF0000,A:116.37359,39.92437;116.47359,39.92437",
success: (data)=>{
that.src = data.url
// console.log("~~~~amap~~~~~~~success~~~~~~~~~~~~"+data.url)
},
fail: (info)=>{
wx.showModal({title:info.errMsg})
}
}
)
},<image :src="src"></image>这里实现了简单的获取静态地图方法，cv的话key请自行更换，ok! 到这里如果是使用vue2的话是完全没有问题的，但是我的vue3项目每次运行都会报
SyntaxError: The requested module does not provide an export named 'default'
import * as amap from "@/lib/amap-wx.130.js";尝试加了 * as 进行整体加载又会报
UncaughtReferenceError: module is not defined
解决方案：
import 方式导入js 模块需要在js文件中声明 export 导出，查看amap-wx.130.js文件发现文件末尾的导出是这样写的
module.exports.AMapWX=AMapWX;这种导出方式对应的是Vue 2依赖如使用 commonJS 方式导出
// module.exports.AMapWX=AMapWX;
//适配vue3
export default { AMapWX };把 module.exports.AMapWX=AMapWX; 替换成 export default { AMapWX }; 完美解决
文章来源：https://www.toymoban.com/news/detail-495441.html
参考 ES6 - 模块Module的使用方法文章来源地址https://www.toymoban.com/news/detail-495441.html
到了这里，关于Uni App + Vue3 引入高德小程序插件Js文件失败的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
