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

 更新时间:2021年08月03日 15:30:07   作者:Jay_Chou12580  
这篇文章主要介绍了Nginx部署vue项目和配置代理,需本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,要的朋友可以参考下

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配置是否正确

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/; 	
	}

如图

在这里插入图片描述

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

4.访问项目即可

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

5.二级菜单404问题

vim打开default文件

try_ files $uri $uri/ =404;

修改为

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

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

相关文章

  • 基于Nginx实现访问控制、连接限制

    基于Nginx实现访问控制、连接限制

    Nginx自带的模块支持对并发请求数进行限制, 还有对请求来源进行限制。可以用来防止DDOS攻击。这篇文章主要介绍了基于Nginx实现访问控制、连接限制的相关资料,需要的朋友可以参考下
    2019-11-11
  • Nginx配置基于多域名、端口、IP的虚拟主机

    Nginx配置基于多域名、端口、IP的虚拟主机

    这篇文章主要介绍了Nginx配置基于多域名、端口、IP的虚拟主机,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Nginx的信号控制

    Nginx的信号控制

    今天小编就为大家分享一篇关于Nginx的信号控制,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • lnmp环境中如何为nginx开启pathinfo

    lnmp环境中如何为nginx开启pathinfo

    这篇文章主要介绍了lnmp环境中如何为nginx开启pathinfo的方法,操作很简单,需要的朋友可以参考下
    2015-01-01
  • Nginx+Keepalived实现双机热备

    Nginx+Keepalived实现双机热备

    这篇文章主要介绍了Nginx+Keepalived实现双机热备,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 为Nginx添加SPDY功能

    为Nginx添加SPDY功能

    我也开始尝试着给自己的论坛加上SPDY协议,WEB服务器本人选择的是nginx,在过去,Nginx并没有内置SPDY协议,需要打开的话还要下载开发版然后手动编译,很不方便
    2014-12-12
  • 找出nginx配置文件的所在位置的方法详解

    找出nginx配置文件的所在位置的方法详解

    这篇文章主要介绍了找出nginx配置文件的所在位置的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Linux下安装MongoDB的实现步骤

    Linux下安装MongoDB的实现步骤

    这篇文章主要介绍了Linux下安装MongoDB的实现步骤的相关资料,希望通过本文能帮助到大家,让大家轻松安装,需要的朋友可以参考下
    2017-10-10
  • Linux下Tomcat+Nginx服务器环境安装配置的简明教程

    Linux下Tomcat+Nginx服务器环境安装配置的简明教程

    以Nginx作为反向代理再用Tomcat驱动Java Web程序是当今很流行的一种方案,那么这里我们就着眼于最基本的生产环境搭建,一起来看一下Linux下Tomcat+Nginx服务器环境安装配置的简明教程
    2016-05-05
  • Nginx中共享session会话配置方法例子

    Nginx中共享session会话配置方法例子

    这篇文章主要介绍了Nginx中共享session会话配置方法例子,最后使用第三方模块upstream_hash解决了这个问题,需要的朋友可以参考下
    2014-07-07

最新评论