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

晨闻星
  • 59

通过<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]
});

TIM截图20191118095803.png

回复
阅读 1.3k
2 个回答

可以在你需要使用的地方再导入,我之前导入百度地图的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`
})
  1. 侦听加载失败事件,重新加载。记得给初始化加上轮询检查。
  2. 提示用户刷新页面
  3. 如果第三方环境不可控,直接把依赖打包到生产代码里也不错
宣传栏