vue3.0+vite+ts项目引用高德地图不能打包问题

问题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)
    }
  })
}

使用方法

 一阵操作下来能打包了。