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结构并且修改一些样式从而达到预期的标准