10-2 Vue项目的联调测试上线 - 真机测试

ゝ一世哀愁。 2022-03-26 08:14 164阅读 0赞

再启动命令行工具。执行命令，ipconfig.  
作用，查看本机ip地址。  
![在这里插入图片描述][20190116141749416.png]

windows：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Blbmd4aWFvemhlbjExMTE_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Blbmd4aWFvemhlbjExMTE_size_16_color_FFFFFF_t_70 1]  
此时，8080端口访问被拒，原因是我们的项目是运行在webpack中，webpack中不允许外界通过端口访问。  
我们可以通过修改项目中的packge.json来让它外界通过8080，允许访问。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Blbmd4aWFvemhlbjExMTE_size_16_color_FFFFFF_t_70 2]  
只要这样子可以运行，就可以让手机在同一个局域网内通过相同的ip地址来访问项目。  
手机截屏。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Blbmd4aWFvemhlbjExMTE_size_16_color_FFFFFF_t_70 3]  
上传代码的时候，把 --host 0.0.0.0 修改撤销，再上传，就可以了。

[20190116141749416.png]: /images/20220326/7c1422af56d347c9acbaf3d5c5913977.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Blbmd4aWFvemhlbjExMTE_size_16_color_FFFFFF_t_70]: /images/20220326/334841f67787423883aace1be743cf20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Blbmd4aWFvemhlbjExMTE_size_16_color_FFFFFF_t_70 1]: /images/20220326/3bfc16b08b4d4950bce4af8444a504f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Blbmd4aWFvemhlbjExMTE_size_16_color_FFFFFF_t_70 2]: /images/20220326/1a1b5aaed9684c2c816e0f2b6e8f5f35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Blbmd4aWFvemhlbjExMTE_size_16_color_FFFFFF_t_70 3]: /images/20220326/4ca8d1298d7d46f88243e488ddab515d.png