前端在nginx上部署vue的dist包,配置跨域问题

作者 : admin 本文共910个字,预计阅读时间需要3分钟 发布时间: 2024-06-8 共3人阅读

目录

1.当你有一台服务器,先通过ssh等通道链接

1.1 首先打开会话通过ip链接 输入密码进入

1.1.1 打开会话

1.1.2 创建ssh链接 确认后输入密码就ok了

3.上传前端dist包,放到想放的路径

4.放好了前端包以后 我们就需要配置一下nginx.conf的代理

4.2首先找到服务器安装nginx的位置

1.进入文件夹     cd  /usr/local/nginx/conf/  

2.查看文件夹列表   ls 

3.编辑文件  sudo vi nginx.conf

4.进来了以后当前只是查看,找到location / {} ,按  i 进行编辑

5.退出并保存 ,先按下esc 退出编辑模式 ,然后按住shift  + ! 

6.重启nginx   命令  sudo ./nginx -s reload 

7.重启完成后 访问当前服务器路径即可

8.查看跨域是否生效


1.当你有一台服务器,先通过ssh等通道链接

这里我用的是免费的  MobaItem   或者xshell等

1.1 首先打开会话通过ip链接 输入密码进入

1.1.1 打开会话

前端在nginx上部署vue的dist包,配置跨域问题插图

1.1.2 创建ssh链接 确认后输入密码就ok了

前端在nginx上部署vue的dist包,配置跨域问题插图(1)

3.上传前端dist包,放到想放的路径

前端在nginx上部署vue的dist包,配置跨域问题插图(2)

4.放好了前端包以后 我们就需要配置一下nginx.conf的代理

4.2首先找到服务器安装nginx的位置

一般为位置为 /usr/local/nginx/conf/ ,如果知道你服务器的配置文件位置,那我们直接切进去

使用命令 

1.进入文件夹     cd  /usr/local/nginx/conf/  
2.查看文件夹列表   ls 

前端在nginx上部署vue的dist包,配置跨域问题插图(3)

3.编辑文件  sudo vi nginx.conf

这边让我们输入密码,输入密码时候是不可见的 所以输入直接敲回车 正确就直接进去了,错了就重新来过

前端在nginx上部署vue的dist包,配置跨域问题插图(4)

4.进来了以后当前只是查看,找到location / {} ,按  i 进行编辑

前端在nginx上部署vue的dist包,配置跨域问题插图(5)

根据需要进行启动配置

前端在nginx上部署vue的dist包,配置跨域问题插图(6)

5.退出并保存 ,先按下esc 退出编辑模式 ,然后按住shift  + ! 

前端在nginx上部署vue的dist包,配置跨域问题插图(7)

6.重启nginx   命令  sudo ./nginx -s reload 

找到nginx安装的目录下的 /sbin 文件夹,我的是在 /conf的同级目录

cd /usr/local/nginx/sbin/

前端在nginx上部署vue的dist包,配置跨域问题插图(8)

前端在nginx上部署vue的dist包,配置跨域问题插图(9)

7.重启完成后 访问当前服务器路径即可

前端在nginx上部署vue的dist包,配置跨域问题插图(10)

8.查看跨域是否生效

前端在nginx上部署vue的dist包,配置跨域问题插图(11)

本站无任何商业行为
个人在线分享 » 前端在nginx上部署vue的dist包,配置跨域问题
E-->