vue项目笔记（30）-vue项目接口的联调与真机测试

爱被打了一巴掌 2021-09-16 03:52 392阅读 0赞

# vue项目接口的联调与真机测试 #

## vue项目接口的联调 ##

当前端的代码编写完毕，后端的接口也已经也编写完毕的时候，我们此时便需要进行接口联调，将模拟的数据替换为真实的后端接口。

vue项目中进行接口联调的步骤：

1、删除之前的模拟数据，即static/mock下的所有json文件。

![70][]

2、修改config/index.js中的proxyTable内容，重启项目。

proxyTable: {
          '/api': {
            target: 'http://192.168.0.102:8080', //真实的后端接口
          }
        }

## vue项目的真机测试 ##

vue项目真机测试的步骤：

1、修改package.json文件，重启项目。

"scripts": {
        "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", // 此处增加--host 0.0.0.0
        "start": "npm run dev",
        "build": "node build/build.js"
      }

2、将手机与电脑处于同一个局域网下，手机浏览器地址栏输入：[http://192.168.0.104:8080][http_192.168.0.104_8080]，即可实现手机预览项目。备注：[192.168.0.104][http_192.168.0.104_8080]表示当前电脑的ip地址。

附：电脑IP地址的查询方法

打开终端，输入ipconfig/all即可查看当前的IP地址。

![70 1][]

若在手机端访问，该网页的时候，如果出现白屏的现象。原因可能有以下两种情况：

（1）手机浏览器默认不支持promise。

解决方法：安装babel-polyfill这个依赖，而后在main.js中引入。

npm install babel-polyfill --save

import 'babel-polyfill'

[70]: /images/20210802/1b866ac53d3b4346bf6fead1fd21eb0c.png
[http_192.168.0.104_8080]: http://192.168.0.104:8080
[70 1]: /images/20210802/26b9b803805240889f20e1e66cb39b5b.png