Vue2.5 旅游项目实例26 联调测试上线-真机测试

我们访问项目都是在浏览器输入 http://localhost:8080/#/

打开一个命令行窗口，获取当前机器的内网IP

window输入：ipconfig

mac输入：ifconfig

得到自己的内网ip后，按说输入 http://192.168.0.xxx:8080 一样可以访问到项目，但是却报错，显示无法访问。

这是因为我们前端的项目，是通过 webpack 的 dev server启动的，但是 webpack 的 dev server 默认不支持通过IP的形式进行页面的访问。所以我们需要把它默认的配置项做一个修改。

打开代码，在项目的根目录下有一个package.json文件：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

// 修改为

"scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

保存后，重启服务。

这时输入 http://192.168.0.xxx:8080/#/ 就可以访问了。

我们可以通过手机连接内网，在手机浏览器输入IP地址访问页面，然后就可以在手机上进行各项的测试了。

当我们访问到城市列表页，拖动右侧字母表时，发现整个屏幕都会跟着上下滚动，所以我们要修改下代码。

打开city目录下的Alphabet.vue文件，添加事件修饰符 prevent ：

<li class="item" @click="handleClick"
      @touchstart.prevent="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      v-for="item in letters" :key="item" :ref="item">{{item}}</li>

然后重新刷新页面，手指滑动字母表，就跟着切换了。

当然不同手机可能测试的效果不太一样，比如低版本的安卓手机，可能会出现白屏的效果。

这可能是两种情况造成的：

1.你的手机浏览器默认不支持Promise

解决办法：安装第三方的包 babel-polyfill 

npm install babel-polyfill --save

这个包的作用是：会判断如果浏览器没有 Promise ，会自动往里添加这些ES6的新特性。

安装完成后，重启下服务，在打开main.js文件，添加引入：

import 'babel-polyfill'

再刷新页面，没有问题了。

2.webpack dev server的问题

解决办法：打包上线测试