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 相关文章推荐
Nginx 过滤静态资源文件的访问日志的实现
Mar 31 Servers
Nginx域名转发https访问的实现
Mar 31 Servers
Nginx如何配置Http、Https、WS、WSS的方法步骤
May 11 Servers
Nginx+Tomcat负载均衡集群的实现示例
Oct 24 Servers
Apache Hudi集成Spark SQL操作hide表
Mar 31 Servers
Tomcat弱口令复现及利用
May 06 Servers
nginx lua 操作 mysql
May 15 Servers
使用Apache Camel表达REST服务的方法
Jun 10 Servers
openEuler 搭建java开发环境的详细过程
Jun 10 Servers
Nginx代理Redis哨兵主从配置的实现
Jul 15 Servers
服务器nginx权限被拒绝解决案例
Sep 23 Servers
ubuntu20.04虚拟机无法上网的问题及解决
Dec 24 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
php简单静态页生成过程
2008/03/27 PHP
php escape URL编码
2008/12/10 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python创建系统目录的方法
2015/03/11 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
pandas重新生成索引的方法
2018/11/06 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python实现字典嵌套列表取值
2019/12/16 Python
解决python replace函数替换无效问题
2020/01/18 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
幼儿运动会邀请函
2014/01/17 职场文书
迎新晚会邀请函
2014/02/01 职场文书
班级体育活动总结
2014/07/05 职场文书
优秀纪检干部材料
2014/08/27 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android