vue项目使用百度商桥实现在线聊天功能

小咪咪 2024-04-18 16:34 63阅读 0赞

1.首先下载百度商桥，并注册一个账号，然后登陆这个账号。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

2.登陆进去之后是这样的界面，找到基础设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1][]

3.点击站点，然后点击新建站点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2][]

4.在域名那里输入主机的IP地址，不知道IP的按下Windows+r键，输入cmd,打开cmd输入ipconfig,即可查询主机的IP地址。

5.输入域名点击确定之后即可看到如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 3][]

6.此时点击获取代码，然后将代码一键复制

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 4][]

7.将复制的代码放在vue项目中的index.html文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 5][]

8.此时运行项目即可看到页面上已经有了在线咨询的功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/101508beb38d4b28955b4cf83f64e66c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9de2726e932c4e5f82bdd1c8333e78e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2910ee165505470aa8d0869c7c212781.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/81e6a2648f684db2b67b1c9526730a86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3b961bfa1c154aba9732ade161f2a5ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/48828b6282a440ce95a0795b0e86f345.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8d41ae7389f645e18c94c5ce8b2edf70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/633b780fbea144d6b294bf6f4518b2f0.png