【vue】如何引用外部cdn资源

在使用vue-cli进行项目构建时,有时是需要引用外部cdn资源的,生产环境中可以直接在index.html的头部引用,但是编译时会报错,因为脚手架无法识别这个外部资源.下面以引用腾讯地图api为例,介绍如何正确引用外部cdn资源.

  1. 在index.html头部引用

    <script src="http://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
    
  2. 修改webpack.base.cong.js

    // 因为腾讯地图的api都放在qq变量下输出的,所以配置的value应该是'qq'
    module.exports = {
      externals: {
        'qq': 'qq'
      }
    }
    
  3. 引用

    import qq from 'qq'
    

说明:其实第一步的引入并不是唯一的办法,还可以通过js创建script的方式,我认为上面的方法是最简洁的.

个人博客:午后南杂

发布了12 篇原创文章 · 获赞 6 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览