一、Vue 项目的接口联调
之前我们使用的数据都不是后端返回的真实数据，而是我们自己通过接口 mock 模拟的假数据，当我们开发到这样一个节点，如果前端的代码已经编写完毕了，后端的接口也已经写好的时候，我们就需要把前端模拟的数据删掉，去尝试使用后端提供的数据进行一个前后端的一个调试，这个过程就称为前后端的联调。在 Vue 中如何进行接口的联调？我们来看一下。
在之前写代码的时候，我们在 static 目录下，会有一个 mock 文件夹，里面写了一些 json 文件，当我们的代码做联调的时候，这些 mock 的数据就没用了，我们要把这些 mock 数据切换为后端真实提供给我们的数据。
我用 Node.js 启动了一个后端服务器，将之前 mock 模拟的数据放到 Node 服务器上并简单地编写了接口给前端调用，来实模拟测试前后端项目的联调。
如何用 Node.js 编写接口可以参考我的这篇文章 “用 Node.js 编写 RESTful API 接口给前端调用”，具体怎么编码我就不详细说了，可以去我的 GitHub 仓库“Vue-Travel-Server”将文件下载下来，安装依赖包并启动，即可使用我编写好的接口。
用 Node.js 编写好数据接口后，我们可以测试一下，启动服务，访问以下三个地址：
http://localhost:8082/api/index.json
http://localhost:8082/api/city.json
http://localhost:8082/api/detail.json
看到数据可以请求成功，那就回到我们的 Vue 项目中，试用一下这三个接口，这回不用本地 mock 下的数据了，而是去访问后端服务器的数据。打开 config/index.js，在“Vue.js第6课-项目实战-首页开发（part03）”中讲过一个 proxy 代理的功能，之前我们将 /api 开头的请求替换成了本地的 /static/mock/ 下的数据，也就是将请求转发到前端 8080 这个服务器下，现在我要把他转发到后端的服务器上，我们将 target 中的地址换为后端服务器的地址（上面我在 Node.js 中设置的服务器端口号为 8082），在 pathRewrite 中，将 /api 的地址映射到服务器的 api 的路径下，而不是我本地的 /static/mock/ 路径：
config/index.js
proxyTable: {
'/api': {
target: 'http://localhost:8082', // 后端提供的接口地址
pathRewrite: {
'^/api': 'http://localhost:8082/api/',
}
}
},
这个时候，回到页面，我们可以看到 Node.js 提供的接口数据可以正常请求到，页面渲染也没有任何问题：
但是在 pathRewrite 中这么写，其实是没有任何意义的，直接将 pathRewrite 删除就可以了。此时 proxyTable 变得非常简单，只要你在开发服务器上请求 api 下面的地址，我都帮你转发到后台服务器上面。当改变了 config 目录下的配置文件的时候，需要重启前端项目服务。
这个时候，打开页面，可以看到成功请求到后端接口的数据并渲染到页面上了。当然，现在我们的前后端都是在我们本地，在做真实的前后端联调的项目中，如果后端服务不在本地，而是在后端程序员的电脑上，或者是内网/外网的服务器，如果是这样的话，你的代理就不能写 localhost 了，可以去写一个内网的 ip 地址，或者外网域名，通过这种形式，我们就可以把 /api 这个地址的任何请求代理转发给任何一台后端服务器从而非常方便的实现前后端的联调。
我们修改一下后端服务的主机名和端口号来做个测试，在 Node.js 服务器下这样修改：
app.js
const hostname = '127.0.0.1';
const port = 3000;
const server = app.listen(port,hostname, () => {
console.log(`服务器运行在 http://${hostname}:${port}`);
});
然后打开 Vue项目的 config/index.js，这样修改就可以了。
proxyTable: {
'/api': {
target:'http://127.0.0.1:3000',
pathRewrite: {}
}
},
回到页面上，可以看到数据请求依然没有任何问题。以上就完成了 Vue 项目的接口联调。
二、Vue 项目真机测试
这一章来看一下 Vue 项目如何进行真机测试。我们在通过 npm run dev 启动项目服务的时候，终端会显示出项目的服务地址，通过这个地址我们就可以访问项目了：
我再启动一个终端，执行 ifconfig（如果是 window 操作系统，命令就是 ipconfig），通过这个命令，我们可以获取到当前机器的 ip 地址：
所以我电脑在内网里的 ip 地址就是 192.168.0.103，复制一下这个地址，然后在浏览器中输入一下 192.168.0.103，他指的也是我这台机器，所以 8080 端口和 localhost:8080 端口实际上指的地方都是一样的，正常访问 192.168.0.103:8080/ 也是可以打开项目的，但是现在浏览器提示无法建立链接，为了做一下确认，把 8080 端口换成 80（后端接口地址），本地的后端服务器是可以正常启动的，也就是说 ip 地址没问题，只是 8080 端口无法被外界访问，原因是我们前端的项目是通过 webpack-dev-server 启动的，webpack-dev-server 默认不支持通过 ip 的形式进行页面的问问，所以我们要对他默认的配置项做一个修改。
打开项目根目录下的 package.json 文件，我们每次执行 npm run dev 的时候，实际上都是在运行这样一段话：
package.json
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
也就是帮我们启动一个 webpack-dev-server，如果想让这个 webpack-dev-server 能够通过 ip 地址被访问的话，我们需要在上面那行代码中加一端代码“--host 0.0.0.0”：
package.json
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
这样去修改一下配置项就可以了。重启一服务，这个时候，访问 192.168.0.103:8080/#/ 就没有问题了。
可以通过 ip 地址访问网站之后呢，我们就可以让我们的手机直接在内网里通过这个地址访问该网站了。这样就可以做一个真机测试。
通过测试，发现一个 BUG，在城市列表也，我滑动右侧字母表，页面也跟着滑动了，所以在代码里我们需要把这个 BUG 解决掉。打开 city/alphabet.vue 这个组件，给模板中的 touchstart 加一个修饰符 prevent：
city/alphabet.vue
<div class="li" :ref="item" v-for="item of letters" :key="item" @touchstart.prevent="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @click="handleAlpClick">{{item}}</div>
它是一个事件修饰符，可以阻止 touchstart 的默认行为，当阻止掉他的默认行为的时候，滚动字母表的时候，页面就不会跟着上下拖动了，回到手机上，可以看到没有任何问题了。
在 Vue 项目的真机测试中，因为手机机型的不同，就会出现不同的问题，如果是一些低版本的安卓手机，可能会出现在手机上访问这个网页，是白屏的效果，他可能有两种原因产生，一种是你的手机上可能默认不支持 Promise，解决这个问题，我们需要通过 npm 安装一个第三方的包，babel-polyfill，这个包他会判断，如果浏览器没有 Promise，会自动帮我们去添加这些 ES6 的新特性。
安装好之后，进入 main.js 入口文件，去引入 babel-polyfill 这个包，这样这个项目在所有浏览器上都支持 Promise 了，一部分手机上展示有白屏的问题也就得到解决。如果还有一部分手机依然有这样的问题，这种情况一般来说不是代码的问题，而是 webpack-dev-server 的问题，下一章我们来讲解 webpack 的打包上线，可以把项目打包好了之后，放到真正的开发环境或者线上环境，去做一个测试，当代码上传到开发环境的服务器或者线上的服务器环境的时候，白屏问题就不会出现了。
三、Vue 项目打包上线
在对 Vue 项目进行了联调与真机测试之后，我们把项目打包上线，那 Vue 的项目如何真正的完成上线的流程呢？
当我们做 Vue 项目上线的时候，首先第一步，在项目下打开命令窗口，运行 npm run build 命令，这个时候，Vue 的脚手架工具会帮助我们自动的对 src 目录下的源代码进行打包编译，生成一个能被浏览器运行的代码，同时这个代码也是一个压缩过后的代码。
完成之后，打开我们的项目目录，可以看到里面多了一个 dist 目录，这个目录中的代码，就是我们最终要上线的代码，我先讲这个目录放到桌面上去。
下一步，我会将 dist 目录里的内容给到后端的开发人员，后端会把这个代码放到服务器上，然后和后端代码一起上线，这样就完成了最简单的上线。
之后我会详细讲解一下如何将 Vue 项目部署到阿里云的 Linux 服务器上。
该系列文章是我在慕课网上通过学习 DellLee 老师的“Vue2.5 开发去哪儿网 App 从零基础入门到实战项目” 这堂课来总结的一些笔记，记录了 DellLee 老师讲过的内容，以及一些自己对 Vue.js 的理解及补充，详细的记录了对 Vue.js 的学习过程。
网友评论