【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的方式,我認為上面的方法是最簡潔的.

個人博客：午后南雜