基于vue-cl+carefree的web真机测试解决方案

Z时代
2024-01-10
分类：综合

vue

背景

互联网移动端的真机测试通常是让开发人员感到非常头痛的一件事情，不仅是因为移动端测试中各个型号手机兼容性的多样性，还有测试低效的问题。传统的移动端测试流程如下:

抓包定位→开发人员修改代码→上传代码管理器→测试服务器jenkins打包构建→通过手机访问测试

乍看整个流程很连贯，但仔细分析后却极为低效，每一个细小甚微的诸如css改动都需要经过jenkins重新构建后才可以呈现在手机上。如果开发人员有jenkins权限可以直接构建且jenkins前后端分离互不影响浪费时间尚且可以接受，但是如果没有权限需要通知测试人员，又增加了额外的沟通成本，极为低效。

所以，jenkins固然是个自动化利器，但是在移动端测试开发阶段,jenkins的存在大大增加了开发成本。

为了提升开发效率，在不使用jenkins的同时进行高效开发测试，使用电脑发射wifi到手机让其之间可以互访是一个简便的方式，但发射wifi热点繁琐且不稳定，也会影响工作效率，部分互联网公司也禁止员工私自发射WIFI。

今天在这里为大家介绍一个不依赖Wifi热点的移动web真机测试解决方案(Carefree)

解决方案

Carefree方案有两部分组成，分别是“服务端Whistle”和一个webpack插件。webpack插件主要用来解决手机访问开发电脑本地项目文件的问题，而除此以外的调试问题基本都可以通过“服务端Whistle”解决。

废话不多说，解决步骤大体如下:

1.服务端安装nodejs

2.服务端安装Whistle

3.服务端启动whistle

4.在手机中配置代理

5.webpack安装整合carefree插件

实施方案

找一台手机和电脑都可以访问的内网服务器

1. 服务端安装Node

Windows或Mac系统，访问https://nodejs.org/，安装LTS版本的Node，默认安装即可。

Linux下推荐使用源码安装: 从Node官网下载最新版的Source Code(或者用wget命令下载)，解压文件(tar -xzvf node-vx.y.z.tar.gz)后进入解压后的根目录(node-vx.y.z)，依次执行./configure、./make和./make install。

安装完Node后，执行下面命令，查看当前Node版本

$ node -v

v10.15.3

2.服务端安装whistle

Node安装成功后，执行如下npm命令安装whistle （Mac或Linux的非root用户需要在命令行前面加sudo，如：sudo npm install -g whistle）

$ npm install -g whistle

whistle安装完成后，执行命令 whistle help 或 w2 help，查看whistle的帮助信息

如果能正常输出whistle的帮助信息，表示whistle已安装成功。如果不能需要添加 whistle的环境变量,linux下修改etc/profile文件，加入如下内容:

例：export PATH=$PATH:/zywa/soft/node-v8.11.4-linux-x64/bin/w2

然后运行命令 source /etc/profile 刷新linux环境变量

3. 启动whistle

启动whistle:

$ w2 start

Note: 如果要防止其他人访问配置页面，可以在启动时加上登录用户名和密码 -n yourusername -w yourpassword。

重启whsitle:

$ w2 restart

停止whistle:

$ w2 stop

4. 在手机中配置代理

运行命令w2 start启动刚刚配置whistle的服务端，然后手机连接公司内网wifi设置代理如下图所示:

代理设置中服务器为刚才配置whistle的服务器ip,端口为8899

5. 配置carefree

大致工作原理如下：

修改webpack部分配置，以监听模式（watch mode）启动编译，并将编译后的文件自动上传到内网服务器(解决手动上传不便的问题)

终端（命令行界面）打印出页面入口地址和二维码，手机扫码即可访问（解决手机录入地址不便的问题）

监听文件变化，一旦保存修改，增量编译（解决全量编译速度慢的问题）

将编译后且有变化的文件增量上传到内网服务器（解决全量上传速度慢的问题）

在手机上刷新页面或重新扫码即可看到变化

步骤

1. 使用npm安装carefree插件 npm install @nutui/carefree --save-dev

2.修改package.json文件，在scripts 字段中新增一个命令,如:

"scripts": {
   "build:dev": "cross-env NODE_ENV=carefree carefree_env=dev node build/build.js"}

3.修改webpack配置文件webpack.prod.js

//引入插件
const Carefree = require('@nutui/carefree');
 webpackConfig.plugins = (webpackConfig.plugins || []).concat([
    new Carefree({
      justUseWifi: false,   //是否用wifi
      publicPath: "//172.10.4.76/" + packageJson.name + "/",  //上传成功后返回的二维码页面地址
      ssh: {
            host: "172.10.4.76",          //服务器ip
            port: 22,                     //服务器端口
            username: "user",             //服务器用户名
            password: "password!!!",      //服务器密码  
            source: "dist",               //上传的构建目录
            target: `/zywa/nginx/html/app`  //服务器上传位置
            }
    })
  ]);

如果出现上传失败的情况，请在服务器提前建立好构建目录dist中的相关文件夹，或者运行命令安装

npm install @nutui/carefree --save-dev

修改上面的代码为

//引入插件
const Carefree = require('@nutui/carefree');
const WebpackUploadPlugin = require("webpackUploadPlugin");
 webpackConfig.plugins = (webpackConfig.plugins || []).concat([
   new WebpackUploadPlugin({
      source: "dist",      //上传的构建目录
      ignoreRegexp: /node_moudles/,      //忽略的目录
      sftpOption:  {
            host: "172.10.4.76",          //服务器ip
            port: 22,                     //服务器端口
            username: "user",             //服务器用户名
            password: "password!!!",      //服务器密码  
            target: `/zywa/nginx/html/app`  //服务器上传位置
            }
    }),
    new Carefree({
      justUseWifi: false,   //是否用wifi
      publicPath: "//172.10.4.76/" + packageJson.name + "/",  //上传成功后返回的二维码页面地址
      ssh: {
            host: "172.10.4.76",          //服务器ip
            port: 22,                     //服务器端口
            username: "user",             //服务器用户名
            password: "password!!!",      //服务器密码  
            source: "dist",               //上传的构建目录
            target: `/zywa/nginx/html/app`  //服务器上传位置
            }
    })
  ]);