ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
<br> [**点此进入芝麻小客服官网**](https://xiaokefu.com.cn/?source=kanyun_t_mia ) # vue接入PC插件指南 ### VUE接入PC插件方式一,模板文件`index.html`中引入 将PC插件接入代码,嵌入到模板文件`index.html`中的`</body>`标签之前。参考如下实例代码。 注:`vue`项目的模板文件一般在项目根目录`public`中。 `/public/index.html` ~~~html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <script> (function(z, h, i, m, a, j, s) { z[m] = z[m] || function() { (z[m].a = z[m].a || []).push(arguments) }; j = h.createElement(i), s = h.getElementsByTagName(i)[0]; j.async = true; j.charset = 'UTF-8'; j.setAttribute("data-json",JSON.stringify({ id:'您的idn', token:'您的token', customer:0, // 控制是否显示客服图标,0为显示,1为不显示 language:'ZH' // 控制显示语言,ZH为中文,EN为英文 })); j.id= "xiaokefu_js"; j.src = 'https://pcjs.xiaokefu.com.cn/static/pc_Access/dist/pcAccess.js?version='+parseInt(new Date().getTime()/3600000); s.parentNode.insertBefore(j, s); })(window, document, 'script', '_xiaokefu'); </script> </body> </html> ~~~ ### VUE接入PC插件方式二,main.js中引入 `vue2.x`接入PC插件示例: `/src/main.js` ```javascript import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), mounted(){ (function(z, h, i, m, a, j, s) { z[m] = z[m] || function() { (z[m].a = z[m].a || []).push(arguments) }; j = h.createElement(i), s = h.getElementsByTagName(i)[0]; j.async = true; j.charset = 'UTF-8'; j.setAttribute("data-json",JSON.stringify({ id:'您的idn', token:'您的token', customer:0, // 控制是否显示客服图标,0为显示,1为不显示 language:'ZH' // 控制显示语言,ZH为中文,EN为英文 })); j.id= "xiaokefu_js"; j.src = 'https://pcjs.xiaokefu.com.cn/static/pc_Access/dist/pcAccess.js?version='+parseInt(new Date().getTime()/3600000); s.parentNode.insertBefore(j, s); })(window, document, 'script', '_xiaokefu'); } }).$mount('#app') ``` `vue3.x`接入PC插件示例: `/src/main.js` ~~~javascript import { createApp, h } from 'vue' import App from './App.vue' createApp({ render: () => h(App), mounted() { (function(z, h, i, m, a, j, s) { z[m] = z[m] || function() { (z[m].a = z[m].a || []).push(arguments) }; j = h.createElement(i), s = h.getElementsByTagName(i)[0]; j.async = true; j.charset = 'UTF-8'; j.setAttribute("data-json",JSON.stringify({ id:'您的idn', token:'您的token', customer:0, // 控制是否显示客服图标,0为显示,1为不显示 language:'ZH' // 控制显示语言,ZH为中文,EN为英文 })); j.id= "xiaokefu_js"; j.src = 'https://pcjs.xiaokefu.com.cn/static/pc_Access/dist/pcAccess.js?version='+parseInt(new Date().getTime()/3600000); s.parentNode.insertBefore(j, s); })(window, document, 'script', '_xiaokefu'); } }).mount('#app') ~~~ <br> [**点此进入芝麻小客服官网**](https://xiaokefu.com.cn/?source=kanyun_b_mia ) 您有问题需要咨询的话,可以扫描下方二维码: </h> ![](https://img.kancloud.cn/04/a1/04a1fd65b5f5cfbc32ad431a32fabd2a_200x199.png) </h> </h>