手机上运行vue3.0项目

ゝ一世哀愁。 2022-09-10 05:29 420阅读 0赞

在手机上调试vue3.0项目时需进行以下几步：

## 1. 电脑上按下windows+R，输入cmd，在电脑终端下，输入ipconfig，获取ip地址（IPv4对应的值） ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6qeB5bm05bm05pum6qeC_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]ps：每次连接不同的wifi需要重新进行该步,ip地址会发生变化

## 2.在与package.json同级目录下创建vue.config.js文件 ##

在vue.config.js中输入第一步获取的ip地址及端口号  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6qeB5bm05bm05pum6qeC_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]

ps：  
注意端口号不要发生冲突；  
vue-cli3工程文件夹中是没有vue.config.js这个文件的，所以我们需要自己创建一个，有该文件在文件内输入即可

## 3.在编译器上运行npm run dev,项目启动后，到手机上输入 network 后面的地址即可 ##

![在这里插入图片描述][f03557b840b04540b30ea2989f9eafd1.png_pic_center]

#### ps:若手机上无法运行，需检查 ####

**1.手机和电脑是否处于同一wifi下;  
2.电脑防火墙是否关闭**

附带关闭电脑防火墙步骤：  
①搜索控制面板；  
②依次进入 系统和安全 ->Windows Defender 防火墙；  
③点击右侧 启用或关闭Windows Defender 防火墙；![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6qeB5bm05bm05pum6qeC_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

④关闭防火墙  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6qeB5bm05bm05pum6qeC_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
注意查看完项目后记得关闭防火墙哦~

在手机上查看项目时，自己走了弯路，希望记录下来，自己以后不会忘记，fighting!!!

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6qeB5bm05bm05pum6qeC_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/5e92f80c5f3b42048732fcbb642610ea.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6qeB5bm05bm05pum6qeC_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/9095a1e512b94f04b8d6f67cb16a0e40.png
[f03557b840b04540b30ea2989f9eafd1.png_pic_center]: /images/20220829/f71908e5f0b847cba9895b09e5f35888.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6qeB5bm05bm05pum6qeC_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220829/5c63b799d3794db89bd35bcd71d87ead.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6qeB5bm05bm05pum6qeC_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220829/7f0c3795fd7844feaaf1de803f1901cd.png