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

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

原文发布于微信公众号 - 闰土大叔(running_hacker)

原文发表时间:2018-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逻辑熊猫带你玩Python

工具篇 | “手把手教你搭建一个全能的学习环境(包括但不限于Python)”

最近有读者问我关于自学使用的开发环境搭建的问题。所以特意在这里发一篇我本人为了学习和个人开发使用的环境。其实之前也讨论过相关的内容,只不过涉及的很浅。

23440
来自专栏全华班

一款免费、开源,使用sprinbboot快速开发管理系统

BootDo是在SpringBoot基础上搭建的一个Java基础开发平台,MyBatis为数据访问层,ApacheShiro为权限授权层,Ehcahe对常用数据...

2K10
来自专栏北京马哥教育

像看电影一样看Python程序运行:Livepython

? 像看电影一样看Python程序运行 注意: Livepython目前是alpha版本的软件,它不会处理很多边缘情况,并且功能在将来也可能会改变 Live...

33660
来自专栏IT派

教你用Python来玩微信跳一跳实现物理外挂

1、下载程序:打开下面的链接,点右侧 clone or download,再点 download zip;

15400
来自专栏机器学习算法与理论

【转】python打包成so-* -coding: UTF-8 -* -

Python是一种面向对象的解释型计算机程序设计语言,具有丰富和强大的库,使用其开发产品快速高效。

32510
来自专栏狮乐园

30 分钟理解 CORB 是什么

我当前的 chrome 版本是 v68,如果是 v66 或更低版本可能提示的警告信息略有不同。印象中只对 CORS 比较熟悉,CORB 是个什么鬼?好奇心迫使我...

39630
来自专栏前端杂货铺

node服务的监控预警系统架构

需求背景 目前node端的服务逐渐成熟,在不少公司内部也开始承担业务处理或者视图渲染工作。不同于个人开发的简单服务器,企业级的node服务要求更为苛刻: 高稳定...

43070
来自专栏lulianqi

使用浏览器访问或调试微信公众号(跳过微信认证)

因为大部分公众号web应用实际登录都是使用用户微信认证登录,下文主要是提供一种方法使在PC端使用任意浏览器绕过微信认证完成登录,后面就可以在浏览器中使用或调试w...

4.6K30
来自专栏Kevin-ZhangCG

前后端分离原理

  前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx+Tomcat的方式(也可以中间加一个Node.js)有效的进行解耦,并且前后端分离会为以后...

6.4K50
来自专栏kevin-blog

下拉式终端Tilda

无意中发现一款非常好用的下拉式终端,很多人肯定会问,下拉式终端?什么叫下拉式终端?和linux自带的终端有什么区别呢?所以请带着答案看下面的内容

36110

扫码关注云+社区

领取腾讯云代金券