Nginx部署vue项目并在局域网中开放访问（尝鲜）

目录

前言

1. 打包vue项目

2. 部署在Nginx中

3. 局域网开放访问

4. 局域网设备对项目访问

5. 给作者加加油吧

---

前言

本文章演示如何将一个vue项目打包并部署到Nginx服务器中，并在局域网中开放访问，实现局域网用ipad设备对vue项目的访问。本实验仅为简单试验，适用于入门的童鞋们参考。

实验环境：win10，vue3+vite，nginx-1.22.0。

实验前提：安装部署Nginx服务器

1. 打包vue项目

执行打包命令：

npm run build

打包之后的文件在哪？vite默认是在vue项目下的dist文件夹，如果自己修改了根据自己写的路径找就对了。 

2. 部署在Nginx中

（1）把打包好的文件复制到Nginx服务器中。

例如，本实验在服务器文件夹中新建了front-sys\vite-demo，并把打包好的项目复制到这里。

（2）为项目配置服务端口。

如图进行配置，可以根据自己需求修改相应的属性。

（3）启动nginx服务器：start nginx。

通过本地浏览器打开：http://localhost:8080，就可以看到如下图说明部署成功了。

3. 局域网开放访问

有两种方式将服务开放给局域网访问，一种是直接关闭防火墙，还有一种是不关闭防火墙仅放开指定的端口。通过一下一种方式即可。

（1）关闭防火墙

不推荐这种方式，因为可能会将你的电脑所有端口对局域网内放开，有安全风险。打开控制面板，按照下图的路径找就对了，然后点击关闭防火墙。

（2）不关闭防火墙，仅开放指定端口（推荐）

通过控制面板进行以下步骤的操作：

 

4. 局域网设备对项目访问

局域网访问的话，最简单的就是，访问的设备和nginx服务器的设备连在同一个路由器下就可以了。

（1）看看部署项目的ip地址，在cmd中输入命令查看：ipconfig。

 （2）我这里通过ipad来访问vue项目。访问地址看看就明白了：http://192.168.1.106:8080

​

5. 给作者加加油吧

---------------------------------------------------------------------------------------------------------------------------------

                                          对你有帮助的话，一杯咖啡让作者更有动力~ (click)

---------------------------------------------------------------------------------------------------------------------------------