vue-cli3中webpack扩展外部引用的js的问题

Question

通过<script>引入的js，使用externals扩展，这一步没问题。但是如果当时的网络环境差等原因导致js没有下载到，页面就直接挂掉了。有没有什么办法可以规避这个错误？

//index.html
<script src="https://webapi.amap.com/maps?v=1.4.6"></script>

//vue.config.js
module.exports = {
  publicPath: './',
  configureWebpack: {
    externals: {
      'AMap': 'AMap'
    }
  }
}

//map.vue
import AMap from 'AMap'
let map = new AMap.Map('map', {
  zoom: 17,
  mapStyle: 'amap://styles/darkblue',
  layers: new AMap.TileLayer({
    zooms:[16,18]
  }),
  zooms:[16,18]
});

Answer 1

可以在你需要使用的地方再导入，我之前导入百度地图的js都是这么做的，大致代码如下

let _preloader = new Promise((resolve, reject) => {
        window._initBaiduMap = function () {
           document.body.removeChild($script)
           /*此处执行你的方法*/
           resolve()
        }
        const $script = document.createElement('script')
        document.body.appendChild($script)
        $script.src = `https://api.map.baidu.com/api?v=2.0&ak=ak&callback=_initBaiduMap`
})

Answer 2

1. 侦听加载失败事件，重新加载。记得给初始化加上轮询检查。
2. 提示用户刷新页面
3. 如果第三方环境不可控，直接把依赖打包到生产代码里也不错