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


文章目录

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



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



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

找到你下载nginx的地方

nginx去掉二级目录 nginx二级目录跳转_前端

nginx去掉二级目录 nginx二级目录跳转_vue.js_02


nginx去掉二级目录 nginx二级目录跳转_前端_03

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

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



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

nginx去掉二级目录 nginx二级目录跳转_nginx_04

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