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 09 Servers
Apache站点配置SSL强制跳转443
Mar 09 Servers
nginx网站服务如何配置防盗链(推荐)
Mar 31 Servers
nginx proxy_cache 缓存配置详解
Mar 31 Servers
Nginx配置文件详解以及优化建议指南
Sep 15 Servers
Nginx中使用Lua脚本与图片的缩略图处理的实现
Mar 18 Servers
Docker 镜像介绍以及commit相关操作
Apr 13 Servers
nginx静态资源的服务器配置方法
Jul 07 Servers
Nginx报错104:Connection reset by peer问题的解决及分析
Jul 23 Servers
win7配置本地ftp服务器的图文教程
Aug 05 Servers
SpringBoot前端后端分离之Nginx服务器下载安装过程
Aug 14 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生成自己的LOG文件
2006/10/09 PHP
利用PHP创建动态图像
2006/10/09 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
西门豹教学反思
2014/02/04 职场文书
销售助理岗位职责
2014/02/21 职场文书
竞聘书格式及范文
2014/03/31 职场文书
淮海战役观后感
2015/06/11 职场文书
学术会议领导致辞
2015/07/29 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
快速学习Oracle触发器和游标
2021/06/30 Oracle
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers