Vue引入Udesk在線打電話組件

業務需求需要在我們的CRM後臺引入在線打電話功能

1. 可以直接撥打電話給客戶，首先需要在Vue中引入Udesk打包後的文件，在Vue項目中有兩個地方用來存放靜態資源文件，分別是assets和static文件夾，兩者的區別在於assets裏面的文件會被webpack打包進你的代碼裏，而static裏面的，就直接引用了，不會參與到文件的打包路徑，因此一般在static裏面放一些類庫的文件，在assets裏面放屬於該項目的資源文件
2. 在資源的引用方面來說，放在static目錄下的文件可以通過相對路徑的形式引入，在 <img src="./logo.png">和 background: url(./logo.png) 中，"./logo.png" 是相對的資源路徑，將由Webpack解析爲模塊依賴，因爲 logo.png 不是 JavaScript，當被視爲模塊依賴時，需要使用 url-loader 和 file-loader處理它。vue-cli 的 webpack 腳手架已經配置了這些 loader，因此可以使用相對/模塊路徑。放在static目錄下的文件需要採用絕對路徑的格式引入，static/ 目錄下的文件並不會被 Webpack 處理：它們會直接被複制到最終目錄（默認是dist/static）下，必須使用絕對路徑引用這些文件
3. Vue引入Udesk方式，首先可以在index.html中直接通過Script標籤來引入Udesk相關文件，注意必須使用絕對路徑引入，如果在這個文件中引入的話就相當於是在全局都引入了Udesk，每個文件都可以訪問到，也可以只在我們所需要的文件中引入，在相關Vue文件中動態的生成Script標籤，然後引入相關組件即可
4. 生成Script標籤

        var head = document.getElementsByTagName('head')[0]
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.charset = 'utf-8'
        script.defer = true
        script.async = true
        script.onload = function() {
          //引入後實例化放在這個位置
        }
        script.src = '.........'
        head.appendChild(script)

需要注意的是：因爲Script引入的過程是一個異步的過程，因此在引入後實例化等一系列的操作要放到script.onload後的函數當中，很大程度上引入某些組件然後應用時樣式不是很符合的，我們可以在實例化之後通過原生js來操作他的dom結構並且修改一些樣式從而達到預期的標準