用 vue 脚手架生成了一个项目做简单测试，简单说一下搭建流程，使用一种即可
详细过程可参考 ：https://blog.csdn.net/qq_61541602/article/details/125215221

# vue-cli >= 3 模板
npm install -g @vue/cli
vue create my-project
npm run serve
# 2.x模板(旧版本)
npm install -g @vue/cli-init
vue init webpack my-project
npm run dev

一、我的网络使用 NAT 模式，主机 IP 192.168.3.220，虚拟机 IP 192.168.1.3

主机 192.168.3.220

虚拟机 192.168.1.3

二、保证主机和虚拟机之间能相互 ping 通

主机 ping 虚拟机

虚拟机 ping 主机

三、保证虚拟机项目能正常运行

四、解决方法

1、关闭防火墙

简单粗暴实现方式就是虚拟机关闭防火墙

systemctl stop firewalld.service

主机访问测试

2、开启主机端口映射

开启主机端口映射目的：

• 可以使用主机 IP 访问虚拟机 web 服务器
• 和主机处于同一个局域网的都可以访问
  
  访问测试
  

3、放行防火墙指定端口

① 虚拟机

参考 https://www.cnblogs.com/ubiquitousShare/p/13135747.html

放行虚拟机 8080 端口

firewall-cmd --zone=public --add-port=8080/tcp --permanent

查看 8080 端口是否放行

firewall-cmd --zone=public --query-port=8080/tcp --permanent

重启防火墙

systemctl restart firewalld.service

解决重启防火墙报错 Failed to add /run/systemd/ask-password to directory watch: No space left on device

参考 https://www.tqwba.com/x_d/jishu/259716.html

echo 1048576 > /proc/sys/fs/inotify/max_user_watches

访问测试

到这里测试成功就结束了，下面window 放行端口号的目的是，想让和主机处于同一网段的电脑都可以访问虚拟机的 web 服务器

下面这一步为了局域网内都能访问虚拟机 web 服务器

②、主机

下面以 window 为例，其他系统类似

你可以选择直接关闭防火墙，可以实现局域网内都可以访问虚拟机 web 服务器，最合理的方式是配置 window 的出战规则，放行指定端口即可