vue 中引用高德地图 JS API ，本地正常，部署就报错 403

场景：

VUE 项目中需要用到地址转经纬度，引用了高德地图JS API中的地理编码与逆地理编码方法
引入方式：在index.html中以CDN 方式引入

	<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
    <!-- 高德地图api更新必须配合安全密钥使用 -->
    <script>
        window._AMapSecurityConfig = {
            securityJsCode: '高德api授权密钥',
        }
    </script>
    <script  src="https://webapi.amap.com/maps?v=1.4.11&key={{Web端开发者key}}&plugin=AMap.PlaceSearch"></script>
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

问题：

本地运行正常，部署到测试环境，直接报错403

解决：

引入方式修改为：npm 安装，高德官方文档

npm i @amap/amap-jsapi-loader --save

在 main.js 中使用：

import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode:'',          //  申请的安全密钥
}
AMapLoader.load({
  "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
  "version": "1.4.15",   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15 
  "plugins": [
    'AMap.PlaceSearch',
  ],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  "AMapUI": {                                         // 是否加载 AMapUI，缺省不加载
      "version": '1.0',                               // AMapUI 缺省 1.1
      "plugins": [
        'overlay/SimpleMarker',//SimpleMarker
        'overlay/SimpleInfoWindow',//SimpleInfoWindow
      ],                                   // 需要加载的 AMapUI ui插件
  },
}).then((AMap)=>{
  // AMap = new AMap.Map('container');
}).catch(e => {
  console.log(e);
})