Nginx部署vue项目和配置代理的问题解析


Posted in Servers onAugust 04, 2021

1.nginx安装和启动

# 安装nginx
sudo apt-get install nginx
# 启动
sudo service nginx start

验证安装

# 安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功
nginx -v
# 如果输出类似于这样的版本号等,证明安装完成
nginx version: nginx/1.14.0 (Ubuntu)

2.修改nginx配置文件,部署项目

查看nginx的配置,linux系统下的配置文件通常会存放在/etc目录下的nginx目录
nginx的配置文件就在/etc/nginx文件夹,打开文件/etc/nginx/sites-available/default
(nginx可以有多个配置文件,通常我们配置nginx也是修改这个文件)

使用连接工具自带的编辑器打开或者vim
修改如下两个地方即可成功部署项目

Nginx部署vue项目和配置代理的问题解析

检查nginx配置是否正确

sudo nginx -t

出现 successful 即可

nginx: configuration file /etc/nginx/nginx.conf test is successful

加载nginx配置

 

sudo nginx -s reload

如果项目配置了api跨域,请继续往下看第3点,反之直接第4点访问项目即可

3.配置代理api

一般前后端分离的项目需要进行跨域

还是/etc/nginx/sites-available/default文件编辑

#vue项目中的请求地址前面都需要加上api
#发起请求的代理配置,地址包含/api的回全部替换地址并转发到proxy_pass下的地址
location /api/ {
 		rewrite ^/b/(.*)$ /$1 break;
 		proxy_pass http://www.ifyyf.com/; 	
	}

如图

Nginx部署vue项目和配置代理的问题解析

即可代理到原来vue.config.js的跨域代理了

4.访问项目即可

打开服务器的ip或者域名访问项目即可

5.二级菜单404问题

vim打开default文件

try_ files $uri $uri/ =404;

修改为

try_ files $uri $uri/ /index.html;

到此这篇关于Nginx部署vue项目和配置代理的文章就介绍到这了,更多相关Nginx部署vue项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Servers 相关文章推荐
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
Mar 09 Servers
Nginx配置https原理及实现过程详解
Mar 31 Servers
Rhit高效可视化Nginx日志查看工具
Nov 01 Servers
NGINX 权限控制文件预览和下载的实现原理
Jan 18 Servers
nginx中封禁ip和允许内网ip访问的实现示例
Mar 17 Servers
OpenStack虚拟机快照和增量备份实现方法
Apr 04 Servers
阿里云ECS云服务器快照的概念以及如何使用
Apr 21 Servers
nginx 配置缓存
May 11 Servers
apache ftpserver搭建ftp服务器
May 20 Servers
Tomcat 与 maven 的安装与使用教程
Jun 16 Servers
Windows server 2022创建创建林、域树、子域的步骤
Jun 25 Servers
vscode内网访问服务器的方法
Jun 28 Servers
centos8安装nginx1.9.1的详细过程
Aug 02 #Servers
Nginx反向代理至go-fastdfs案例讲解
Aug 02 #Servers
Nginx配置之实现多台服务器负载均衡
Aug 02 #Servers
nginx服务器的下载安装与使用详解
Aug 02 #Servers
nginx反向代理配置去除前缀案例教程
Jul 26 #Servers
nginx结合openssl实现https的方法
nginx配置虚拟主机的详细步骤
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Python生成密码库功能示例
2017/05/23 Python
Python学习入门之区块链详解
2017/07/25 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
python代码能做成软件吗
2020/07/24 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
给校长的一封建议书
2014/03/12 职场文书
个人自我鉴定总结
2014/03/25 职场文书
学校党员对照检查材料
2014/08/28 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
中学总务处工作总结
2015/08/12 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书