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

2024-06-04 1417阅读

目录

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.1.2 创建ssh链接 确认后输入密码就ok了

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

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

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

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

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

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

使用命令 

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

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

3.编辑文件  sudo vi nginx.conf

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

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

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

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

根据需要进行启动配置

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

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

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

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

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

cd /usr/local/nginx/sbin/

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

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

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

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

8.查看跨域是否生效

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


    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]