Vue项目的真机测试

在命令行运行ifconfig（Linux系统）或是ipconfig（Windows系统），我们要获取到当前机器的一个IP地址，可以看到，当前这台机器的内网的一个IP地址为192.168.43.50：

在浏览器里，我们输入192.168.43.50，也是指的这台机器，他的8080端口和我们的localhost的8080端口是一样的，但是却访问失败，原因是我们前端的项目是通过webpack-dev-server启动的，webpack-dev-server默认不支持通过IP的形式进行页面的访问，所以需要对默认的配置项进行一个修改，打开package.json，在dev中添加一句–host 0.0.0.0就可以通过IP的形式进行页面的访问了。然后重启服务器：
可以通过IP地址访问我们的网站之后，就可以通过手机在内网里通过IP地址访问我们的网站了。（手机和电脑在一个局域网内）：
-（iPhone6s）也许会发生在拖动字母表的时候整个页面一起发生拖拽的情况，在Alphabet.vue中修改：

如果是一些低版本的安卓手机也许会出现手机上访问网页是白屏的效果，可能有两种情况，可能手机上不支持promise，解决这个问题需要安装一个第三方包babel-polyfill：

然后重启服务器，增加一段代码，进入到main.js入口文件中，引入babel-polyfill，刷新手机页面：

vue项目的打包上线（在联调和真机测试之后）

在命令行中运行cnpm run build，这时vue的脚手架工具会帮我们自动的对src目录下的源代码进行打包编译，生成一个能被浏览器运行的代码，同时这个代码也会是个压缩后的代码。打包完成后，控制台会显示Build complete：
这个时候再打开项目目录，会发现多出来一个dist的目录：

目录中的代码就是我们最终要上线的代码：
下一步会把dist目录中的内容给到后端，后端会把这个代码放到后端的服务器的根路径下：
这时候我们只需要在浏览器上打开localhost就可以了，我们访问的localhost实际上是后端的服务器，而后端的服务器已经有了我们前端的代码，所以他会把默认的index.html文件显示出来，同时index文件上又引入了我们打包生成的css和js文件，那么整个前端的代码就可以在后端的服务器上完美的运行起来了。同时后端的服务器上还有后端提供的接口，那么我们就把前端的代码融合到了后端的项目，整个把后端的项目进行上线，整个项目也就完成了。
进入后端的目录，如果想要把上线的代码放在一个文件夹下运行，在浏览器上我希望通过访问localhost下的project这个目录，那么会出现访问不成功的情况。
这时我们需要对前端代码进行一个修改，打开config目录下的index.js文件，会看到一个build打包部分的配置项，找到assetPublicPath，改为‘/project’，意思是我打包的项目要运行在后端的project目录：
打开命令窗口，重新运行cnpm build进行打包，会重新生成一个dist目录，直接改名为project，放到后端的根路径下。然后在浏览器上访问localhost下的project就能运行了。

Vue项目的真机测试相关推荐

vue项目如何真机测试
1.配置网段:(手机和电脑在同一局域网内) 2.在项目中重启命令行(或者cmd)运行 ipconfig 获取到项目在本机运行的ip地址 3.在自己的vue项目下找到package.json 改为自己的 ...
vue项目手机真机预览和调试
很多项目要模拟手机真机环境才能测的出效果比如像高斯模糊的一些样式特效只有在真机上才看得出来:但是如果要上线上每次都要打包所以很不方便,给大家介绍一下我的方法: 1.** 首先找到 config 下面的 ...
vue H5移动端项目真机测试配置
vue cli2 1.配置网段:(手机和电脑在同一局域网内) 2.在项目中重启命令行(或者cmd)运行 ipconfig 获取到项目在本机运行的ip地址 3.关闭防火墙 4.前端:config文件夹下 ...
vue菜鸟从业记：完成项目最后一公里之真机测试和打包上线
最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说"我也不知道我的接口文档写的对不对,我们验证一下吧?我也不 ...
Xamarin Android项目真机测试闪退
Xamarin Android项目真机测试闪退项目在模拟器中运行正常,但在真机上闪退.这是由于项目设置使用共享的Mono运行时. Visual Studio中,在项目属性-Android Optio ...
关于在电脑写的项目在手机上真机测试的注意事项
关于在电脑写的项目在手机上真机测试的注意事项首先就要电脑和手机都在同一个局域网内 (什么意思呢简单来说就是把电脑有线连接断了电脑和手机连上同一个WIFI) 第一步 ipconfig window ...
iOS 11开发教程（十）iOS11无线连接手机真机测试
iOS 11开发教程(十)iOS11无线连接手机真机测试在Xcode 9.0中,已经可以通过无线连接手机进行真机测试了.具体的操作步骤如下: (1)首先需要使用数据线将手机连接到苹果电脑上. (2) ...
Xamarin.iOS真机测试报错
Xamarin.iOS真机测试报错错误信息:The MinimumOSVersion inside Info.plist does not include the device version(er ...
iOS 9应用开发教程之定制应用程序图标以及真机测试
iOS 9应用开发教程之定制应用程序图标以及真机测试定制ios9应用程序图标在图1.12中可以看到应用程序的图标是网状白色图像,它是iOS模拟器上的应用程序默认的图标.这个图标是可以进行改变的.以 ...

Vue项目的真机测试

Vue项目的真机测试相关推荐

最新文章

热门文章