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 相关文章推荐
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
Jun 21 Servers
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
Mar 09 Servers
Nginx代理同域名前后端分离项目的完整步骤
Mar 31 Servers
nginx部署多前端项目的几种方法
May 25 Servers
Consul在linux环境的集群部署
Apr 08 Servers
阿里云日志过滤器配置日志服务
Apr 09 Servers
Nginx反向代理、重定向
Apr 13 Servers
Windows Server 2019 配置远程控制以及管理方法
Apr 28 Servers
Windows Server 2019 安装DHCP服务及相关配置
Apr 28 Servers
详解Nginx的超时keeplive_timeout配置步骤
May 25 Servers
windows server 2016 域环境搭建的方法步骤(图文)
Jun 25 Servers
Nginx安装配置详解
Jun 25 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入门的学习方法
2007/01/02 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP实现合并discuz用户
2015/08/05 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
SVG描边动画
2017/02/23 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python坐标线性插值应用实现
2019/11/13 Python
python关于变量名的基础知识点
2020/03/03 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
上海某公司.net方向笔试题
2014/09/14 面试题
高中地理教学反思
2014/01/29 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
django中websocket的具体使用
2022/01/22 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技