脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → nginx → Nginx部署vue项目

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配置文件中的变量的编写使用,包括从常用的rewrite等方面来深入变量的相关定义,需要的朋友可以参考下
    2016-01-01
  • Nginx配置SSL证书出现PEM_read_bio_PrivateKey() failed错误解决

    Nginx配置SSL证书出现PEM_read_bio_PrivateKey() failed错误解决

    在配置GoDaddy的SSL证书并启动Nginx时,可能遇到由于证书密钥文件编码问题导致的启动失败,具体表现为nginx报错：PEM_read_bio_PrivateKey() failed,本文就来介绍一下,感兴趣的可以了解学习
    2024-10-10
  • 通过Nginx代理转发配置实现跨域的方法（API代理转发）

    通过Nginx代理转发配置实现跨域的方法（API代理转发）

    这篇文章主要给大家介绍了关于如何通过Nginx代理转发配置实现跨域（API代理转发）的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Nginx具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-11-11
  • 使用Bash脚本和Logrotate实现Nginx日志切割的方法

    使用Bash脚本和Logrotate实现Nginx日志切割的方法

    Logrotate是一个Linux系统上用来管理日志文件的工具,它可以定期轮转日志文件、压缩旧的日志文件以及删除过期的日志文件,这篇文章主要介绍了使用Bash脚本和Logrotate实现Nginx日志切割,需要的朋友可以参考下
    2024-05-05
  • 使用nginx搭建creates.io镜像的教程详解

    使用nginx搭建creates.io镜像的教程详解

    在Rust开发中,经常需要使用Cargo从crates.io下载依赖,而国内几乎没有好用的crates.io镜像,使用本文就来使用使用nginx搭建creates.io镜像吧
    2023-12-12
  • 详解nginx服务器绑定域名和设置根目录的方法

    详解nginx服务器绑定域名和设置根目录的方法

    这篇文章主要介绍了详解nginx服务器绑定域名和设置根目录的方法，nginx服务器绑定域名以及设置根目录非常方便，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Nginx http升级到https的完整步骤

    Nginx http升级到https的完整步骤

    这篇文章主要给大家介绍了关于Nginx http升级到https的完整步骤，文中通过示例代码介绍的非常详细，对大家学习或者使用Nginx具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Centos7 安装Nginx整合Lua的示例代码

    Centos7 安装Nginx整合Lua的示例代码

    这篇文章主要介绍了Centos7 安装Nginx整合Lua的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Nginx+IIS简单的部署教程

    Nginx+IIS简单的部署教程

    这篇文章主要为大家详细介绍了Nginx+IIS简单的部署教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Nginx实现正向代理实例

    Nginx实现正向代理实例

    这篇文章主要介绍了Nginx实现正向代理实例,正向代理的作用在于正向代理隐藏了用户，用户的请求被代理服务器接收代替，到了服务器，服务器并不知道用户是谁,需要的朋友可以参考下
    2023-08-08

最新评论