vue3.0+vite+ts项目引用高德地图不能打包问题
vue3.0+vite+ts项目引用高德地图不能打包问题Amap报错
·
问题1:
webpack可以配置 externals: {"BMap": "BMap",'AMap': 'AMap'},
但是vite中没有该配置项,很难搞。
问题2:
当你在vue的index.html中引用了如下
但是全局AMap在ts语法报错 但是不影响使用。不过打包时候报错
问题2:
觉得应该在window上。引用window.XXXXX就好了。想法很对,但
难受不.......(ts:老子不同意)
没用的逼逼完了,老规矩不能复制粘贴让我解决的方案都是垃圾,上代码
问题1解决方案:
webpack中有externals配置 vite怎么使用
首先 介绍 vite-plugin-resolve-externals插件
npm i -D vite-plugin-resolve-externals
vite-plugin-resolve-externals - npm
下载完成后在项目的 vite.config.ts 文件中引入
代码不想去官网
import { defineConfig } from 'vite'
import resolveExternalsPlugin from 'vite-plugin-resolve-externals'
export default defineConfig({
plugins: [
resolveExternalsPlugin({
AMap: 'AMap'
})
],
})
问题2和问题3统一说 解决方案
window.XXXXX 报错 是因为需要声明一下window
vue3.0中创建 typings.d.ts文件
在里面声明你要Window.XXXX的对象
declare interface Window {
XXXX:any
}
能复制的来了
declare interface Window {
AMap: any
initAMap: any
}
针对问题2高德地图Amap爆红问题
去在你项目中编写公共方法的地方封装当前方法
快。复制。。。
export function MapLoader () {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
使用方法
一阵操作下来能打包了。
更多推荐
已为社区贡献1条内容
所有评论(0)