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配置https实现域名访问项目(图文教程)
Mar 31 Servers
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
May 27 Servers
解决使用了nginx获取IP地址都是127.0.0.1 的问题
Sep 25 Servers
zabbix自定义监控nginx状态实现过程
Nov 01 Servers
图文详解nginx日志切割的实现
Jan 18 Servers
Apache Hudi数据布局黑科技降低一半查询时间
Mar 31 Servers
nginx.conf配置文件结构小结
Apr 08 Servers
Windows Server 2019 安装DHCP服务及相关配置
Apr 28 Servers
如何Tomcat中使用ipv6地址
May 06 Servers
windows server2008 开启端口的实现方法
Jun 25 Servers
CentOS7 minimal 最小化安装网络设置过程
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中的string类型使用说明
2010/07/27 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
Django自定义过滤器定义与用法示例
2018/03/22 Python
python编程使用协程并发的优缺点
2018/09/20 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
八项规定整改方案
2014/02/21 职场文书
中国入世承诺
2014/04/01 职场文书
活动宣传策划方案
2014/05/23 职场文书
技校毕业生自荐信
2014/06/03 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python