获取环信appkey

登录环信管理后台

地址：https://console.easemob.com/user/login，没有账号的话注册

创建IM应用

点击我的应用，创建IM应用，填写相关信息

点击刚才创建的应用，获取appkey

运行demo

下载webim-vue-demo

找到webim-vue-demo,下载下来:https://github.com/easemob/webim-vue-demo

修改配置

注意事项：该示例中的视频会议需要https 运行

1.使用VS Code打开项目，修改build文件夹下的devServer里的https改为true

2.修改config下面的index.js里的host改为0.0.0.0

运行项目

注意：使用npm安装相关依赖，不要用cnpm

npm install

npm run dev

测试

在浏览器地址栏输入https://ip地址:端口号，示例：https://192.168.199.195:8080

优化

样式优化

aapkey 发布之后可配置

1.在static文件夹下面新建文件config.js,配置好appkey

2.在utils文件夹下面的WebIMConfig.js中引入配置，使用配置

发布webim项目

npm run build

nginx配置https

获取证书

提供一个测试方法

1.openssl 生成v3班自签证书：https://www.cnblogs.com/real-bert/p/11807225.html

2.Https更换证书报错：no start line:Expecting: TRUSTED CERTIFICATE解决方法详解

https://blog.ityuan.com/1505

配置nginx文件

• 将生成好的证书放到nginx文件夹里面，里面包含三个文件.crt .csr .key
• 修改conf下面的nginx.conf文件

嵌入移动端

屏蔽web端的登录

用户从移动端登陆，所以需要屏蔽掉web端的登录

将router中的Login的注释掉，重定向和''时修改为contact页面

接收页面传来的用户名密码

app.vue的beforeMounted里面截取移动端传过来的用户名和密码，并存到localstorage中

嵌入移动端

使用web-view嵌入，传入用户名、密码

测试到手机上时，需打开手机上app的摄像头和麦克风的权限

碰到的问题

1.本地运行测试视频功能报错

原因：需https

解决方法：修改配置,详见上述中的运行demo中的修改配置

2.nginx配置https问题

https://www.cnblogs.com/real-bert/p/11807225.html

https://blog.ityuan.com/1505

3.优化时发现样式问题：点击好友进去之后有个小弹窗

原因是使用cnpm install 

解决方法：删除node_modules重新使用npm install

4.使用嵌入到手机，运行时，测试视频功能是报错

原因：没有权限

解决方法：打开手机上app的摄像头和麦克风的权限