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，根本没有啥技术干货。但是作为以记录王小闰职场生活为生的我来说，这却是很多前端新人小白在公司开发项目中绕不过去的一个环节，总结沉淀也好，互诉衷肠也罢，我只想呐喊一句：

以王小闰为镜，可以知得失。

 

 

---

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