乐通lt118平台最新线路
  咨询电话:13649701353

乐通lt118集团官方客服

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

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

  

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

, 1, 0, 9);