admin 管理员组

文章数量: 1184232

同一域下别人想访问我本地项目时，有两种方法：① 将前端vue项目部署到nginx上 ② 配置 vue.config.js 文件，添加代理。

（一）将前端 vue 项目部署到 Nginx

1、官网下载 nginx 稳定版：http://nginx/en/download.html
（如下载到 E:\nginx\nginx-1.18.0 目录中）

2、双击运行 nginx，然后通过查看任务管理器，确定 nginx 是否已经执行。

注意：nginx 默认端口号是80，如果端口号被占用，需要修改。

3、将前端 npm run build 打包后的 dist 文件夹复制到 html文件夹中

4、修改 E:\nginx\nginx-1.18.0\conf\nginx.conf 文件
（1）将 #user nobody 修改为 #user root

（2）修改 server
root 默认是 html，这里改为 html/dist ，nginx 会在 dist 文件夹中找到 index.html打开。
（如果80端口号被占用，此处将端口号80改为 88或者其他）

配置后端接口 ip 代理转发：

修改完成之后，重新启动 nginx。
在浏览器中输入 localhost:80 或者 127.0.0.1:80 即可打开项目。
（3）在其他电脑或手机上运行，保证在同一局域网，使用同一个网络。
查看 ipv4地址：cmd打开命令行工具，执行 ipconfig。

将localhost换成查到的地址就可以了。

（二）配置代理

在 vue.config.js 文件中 添加 devServer

通过 cmd 打开命令行工具，通过 ipconfig 获取当前电脑的 IPv4 地址，即host地址，输入一个端口号如 8089。npm run server 启动项目，在同一个域下，其他人就可以访问我本地项目了。
注意：如果别人不能访问，需要查看自己是不是没有关闭防火墙。

本文标签： 项目 Windows Vue nginx

版权声明：本文标题：Windows下将前端vue项目部署到Nginx 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1754432935a3001346.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。