part11 Vue项目接口联调//真机测试

何为项目接口联调？

前端代码编译好了  后端接口写好了

我们就需要去掉前端模拟数据干掉 用后端提供的数据。进行前后端的一个调试

如何联调？

config目录下面 index.js 文件

dev 中proxyTable 中的‘api ’ 中的taget 目标换成后端地址（注意端口） http://localhost:80http://localhost:80

pathRewrite会把 api开头的映射到 后端服务器地址上的api

//总结 只要在开发服务器下请求api/后面的地址 都帮我们转发到后端服务器

//其他电脑 就用内网ip或者外网的域名

---

 

真机测试

//想要手机通过ip地址链接我们的网站

我们前端的项目是通过 webpack-dev-server启动的 默认不支持通过ip访问

我们打开packge.json

dev： --host 0.0.0.0

 问题1: 发现city页面 拖动字母 整个页面拖动 我们可以用

@touchstart.prevent

 问题2. 如果不支持promise  浏览器蓝屏

npm install bable-polyfill --save
import 'bable-polyfill '

 //项目上线

终端 npm run build

脚手架工具会帮我们打包编译src目录下源代码 生成一个能被浏览器运行的代码

也是压缩后的文件

再打开项目目录多出一个目录 dist文件夹

放在后端服务器文件夹下  直接本地打开localhost就行了

//不直接放在api文件旁  而是旁边某个文件夹内

config文件下  index。js 下  build

assetReblicPath: '/name'  也就是打包的项目运行在后端 name文件下 

然后浏览器打开项目就是  localhost/name 目录