【Vue项目】五、去哪儿网APP——项目的联调、测试与发布上线

将页面的数据放至后端，进行前后端调试

前端代码编写完毕，后端也已编写好接口时，不再使用前端的模拟数据，使用后端提供的数据，进行前后端调试。

• 借鉴phpStudy搭建PHP服务器，使用 PHPStudy搭建PHP服务器，将80端口指向Travel文件夹：
  
• 将json数据放至Travel文件夹下的api文件夹：
  
• 修改config文件夹下的index.js文件，将数据获取的api指向PHP服务器的80端口：

proxyTable: {
      '/api': {
        target: 'http://localhost:80'
      }
    },

只要在开发服务器上请求api下面的地址，都会转发到后台服务器上。

真机调试

• 在Git Bash中，输入ipconfig，查看无线局域网下的IPv4地址：
  
• 此时手机浏览器输入192.168.0.142，无法访问，这是因为webpack 的Dev server默认不支持通过IP形式来访问页面，所以需要在package.json中更改配置项：

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

添加了：--host 0.0.0.0
更改成功后，手机可通过192.168.0.142访问项目：

真机调试中出现的问题

• 手机调试中时，在detail页面上，拖动屏幕header没有出现。
  解决方法：更改header.vue的以下代码：

const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset

• 字母表拖拽时，整个屏幕跟着上下滚动的问题的解决方法为：
  修改Alphabet.vue的绑定时间代码为：

@touchmove.prevent="handleTouchMove"

项目打包上线

• 首先运行 npm run build,vue脚手架会帮我们自动的对src目录下的文件源代码进行打包编译，生成一个能被浏览器运行的代码，同时这个代码是压缩过的。
  成功后，显示build Complete
• 接着，travel中会出现一个名字叫dist的目录，这个目录的代码是最终要上线的代码。将这个目录挪到桌面上。
• 将这个代码给到后端人员，后端人员将这个代码给到后台服务器。
• 将dist里的文件挪到后台phpstudy中的travel中。（后端项目根目录里）
• 接着可以实现浏览器输入localhost，打开这个app（实际上是访问后端服务器）