【问题】Nginx部署vue项目进行跳转二级路由报404无法找到目标页面问题和Nginx部署vue项目访问不了接口

Nginx部署vue项目进行跳转二级路由报404无法找到目标页面问题和Nginx部署vue项目访问不了接口



Nginx部署vue项目进行跳转二级路由报404无法找到目标页面问题


问题 :在使用Nginx部署Vue项目的时候,点击了进行跳转二级路由的时候报404 无法找到目标页面问题。
原因:vue的项目为单页应用,通过Nginx服务部署找不到项目路由导致的无法跳转路由配置页面。所以要在nginx服务器配置对所有的路径或者文件夹进行跳转。重定向到首页index下,这样就都能找到路由了

找到你下载nginx的地方
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

location / {
       try_files $uri $uri/ @router;
       index index.html;
 }

location @router {
       rewrite ^.*$ /index.html last;
}

Nginx部署vue项目访问不了接口

在这里插入图片描述

对项目接口进行反向代理,即可在自己的服务器上访问到项目接口的数据
# 当遇到/api (也就是我们的接口)对其进行反向代理
location /api {
     proxy_pass http://172.28.240.xxx:yyy;

总结

以上就是今天要讲的内容,希望对大家有所帮助!!!

  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nginx部署多个vue前端项目时,如果出现二级目录不能访问访问空白的问题,可能是配置文件有误或者项目部署路径有误。 首先,确保nginx的配置文件中的location部分正确配置了前端项目二级目录路径。 例如,有两个前端项目分别为project1和project2,部署路径为/var/www/html/project1和/var/www/html/project2。那么,在nginx的配置文件中,可以这样配置: ``` server { listen 80; server_name localhost; location /project1 { alias /var/www/html/project1/dist; try_files $uri $uri/ /project1/index.html; } location /project2 { alias /var/www/html/project2/dist; try_files $uri $uri/ /project2/index.html; } } ``` 通过配置location /project1和location /project2,将对应的项目访问路径与实际的部署路径关联起来。 另外,注意在配置location时,要正确指定项目的dist文件夹路径,并设置try_files指令来处理路由页面访问。 配置完成后,重新加载nginx配置文件,即可访问到对应的二级目录下的前端项目了。 如果还是无法访问或出现空白页面,可以检查项目是否正确部署到了/var/www/html目录下,并确认项目的打包是否成功。 总结起来,对于nginx部署多个vue前端项目问题,主要是要确保配置文件中的location部分正确指定了项目二级目录路径,并检查项目部署路径和打包是否正确,以及nginx配置的重新加载。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值