vue菜鸟从业记：完成项目最后一千米之真机测试和打包上线

最近我朋友王小闰他们公司的项目开发已经进入收尾阶段，先后端并行开发的差很少了，联调也调过了，上篇文章里也讲到了，所谓联调，就仿佛在说“我也不知道个人接口文档写的对不对，咱们验证一下吧？我也不知道个人数据处理逻辑对不对，咱们验证一下吧？”， 哈哈哈，自嘲一下~

当一切准备就绪，此时就剩下了完成项目的最后一千米，即真机测试和打包上线。

那么如何在vue项目里作真机测试呢？王小闰准备在leader面前大展身手，展现下本身最近的学习成果，让咱们跟着王小闰的节奏操练起来~

首先须要在命令行中输入 npm run dev ，启动本身的vue项目，例：http://localhost:8080，让项目在浏览器里跑起来：

若是你用的是windows系统，输入快捷键WIN+R，输入cmd启动命令行工具，输入ipconfig查看本机IP。

若是你用的是MacOS系统，输入command+空格键，而后再搜索框输入terminal，敲回车进入终端命令行，输入ifconfig查看本机IP。

以mac为例，以下图：

咱们这台机器在内网里的ip地址是192.168.1.4。

而后回到浏览器，将运行着localhost:8080 替换为192.168.1.4:8080,结果发现如图所示，浏览器拒绝了咱们的链接请求：

接下来咱们就要分析缘由了，将地址栏里的8080去掉，换成192.168.1.4/api/，而后再访问一次。测试以后，发现IP是没有问题的，问题出在8080端口没法被外部访问。

缘由是咱们前端的项目是经过webpack-dev-server启动的，而webpack-dev-server默认不支持IP的形式进行页面的访问，因此咱们应该将它的配置项作一个修改。

跟着王小闰的节奏，快速打开项目根目录下的package.json文件，每次运行npm run dev的时候，本质上都在运行它后面定义的 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

若是你想让webpack-dev-server可以经过IP地址被访问的话，只须要在其后面添加一段”--host 0.0.0.0“就能够了，连起来就是

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

而后咱们保存下package.json文件，重启下服务，再回到浏览器从新输入IP+端口号，发现就能够正常访问了。

当进行到这个阶段，咱们就可让手机在内网里直接经过IP地址访问这个网页了。记住，只须要让你的手机和你的电脑在同一个局域网下就能够正常访问了。

以下图手机截屏所示，这里仅仅给你们作个演示以便理解：

经过这几步，王小闰就实现了vue项目里面的真机测试。

还有一种方法就是，本机ip替换localhost，而后使用草料二维码，将http://192.168.1.4:8080生成二维码，将手机链接到与电脑相同的WIFI，扫一扫便可在手机预览。

你们在作真机测试的时候，由于各类手机的机型不太同样，王小闰这边测试用的是一台iPhoneSE，若是你们是一些比较低版本的安卓手机，可能你会在手机上访问这个页面，会出现白屏的现象。

它可能有两种状况产生，第一种状况是：你的手机浏览器上默认不支持promise这个东西，那么如何解决这个兼容性问题呢？

解决这个问题须要安装一个第三方的包，在终端里输入 npm install babel-polyfill --save

babel-polyfill这个第三方的包会帮咱们判断，若是浏览器里没有promise，会自动帮咱们往里面添加这些es6的新特性。

安装好以后咱们须要重启一下服务器，而后跟着王小闰的节奏，打开src/main.js文件，在文件开头引入 import 'babel-polyfill'，而后全部浏览器就均可以完美支持promise了，以前的一部分童鞋手机测试白屏的问题就解决了。

第二种状况是，即便添加上这个第三方包，有的同窗手机上依然会出现白屏问题，那么这个锅就该让webpack来背了。 这其中就涉及到了vue项目的打包上线。

当咱们作vue项目上线的时候，首先第一步须要在终端运行一个命令 npm run build

此时，vue的脚手架工具会帮咱们自动的对src目录下的源代码进行打包编译，生成一个能被浏览器运行的代码，同时这个代码是被压缩过的。稍等片刻，打包过程便会执行完毕，这时终端里会显示 Build complete

值得注意的是，build成功后有个tip提示你build后的文件须要部署在http服务器上，不能经过file协议打开。

这个时候，你会发现，项目根目录里多了一个dist目录：

打开dist文件看看，里面的文件就是咱们要打包上线的内容：

而后王小闰把dist文件夹里面的内容提交到SVN，后端的童鞋会从SVN上拉取下来前端打包过来的dist源码，而后扔到后端服务器的根目录下就OK了。

此时，后端的服务器已经有了前端的代码，默认会显示index.html，同时index.html上面又引入了打包生成的css和js文件，那么整个前端的代码就能够在后端的服务器上完美的运行起来了。同时后端服务器上还有后端提供的接口，这样就把前端的代码融合到了后端的项目，整个把后端项目进行上线，那咱们的webAPP也就作完了。

至此，王小闰就完成了最简单的项目真机测试与打包上线。

最后，闰土有话说：

看完这篇文章的一部分童鞋可能会以为，so easy，根本没有啥技术干货。可是做为以记录王小闰职场生活为生的我来讲，这倒是不少前端新人小白在公司开发项目中绕不过去的一个环节，总结沉淀也好，互诉衷肠也罢，我只想呐喊一句：

以王小闰为镜，能够知得失。

---

更多文章我会第一时间更新在公众号<闰土大叔>里面，欢迎关注~