Vue架構接入PC插件 · 芝麻小客服幫助文檔

<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>  <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>