nginx踩坑之vue页面404问题

最新推荐文章于 2024-04-30 09:00:57 发布
最新推荐文章于 2024-04-30 09:00:57 发布
阅读量1.5k 收藏
点赞数
分类专栏： Python Linux 文章标签： nginx gunicorn vue flask
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/levon2018/article/details/107831139
版权

新项目上线需要部署，部署环境为 nginx + gunicorn + supervisor + vue + flask

前端的路由名有/api前缀，而我后端的接口地址没有这个前缀，所以在nginx转发的时候没有将/api前缀去掉，导致后端识别不了请求过来的地址而返回404错误

比如前端的路由是/api/getuserlist?page=1 , 后端的实际接口地址是/getuserlist 所以是识别不了的

需要在nginx转发的时候在gunicorn绑定地址后加上一个斜杠可以解决。当然这只是404的其中一种情况

 

pigYanYan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue下使用nginx刷新页面404的问题解决
10-16
主要介绍了vue下使用nginx刷新页面404的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
nginx 部署 vue 项目找不到js css文件
热门推荐
GreekMrzzJ的博客
01-05 2万+
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, ...
nginx部署丢失JS，CSS，图片解决办法
hbysjw的博客
04-14 2712
网站找了很多例子都是在nginx.conf里面这么配置的 location ~ .*\.(js|css|jpg|jpeg|gif|png|ico|pdf|txt)$ { proxy_pass http://www.123455.com:8888; } 但是这样改了之后还是无法加载， 找了半天还是用下面的方法可以解决这个问题。 ...
vue项目通过nginx部署，刷新产生404问题的解决
最新发布
huang877620097的博客
04-30 490
vue项目通过nginx部署，刷新产生404问题的解决
vue-cli 打包出来的文件缺少_探讨不需要打包的构建工具 Snowpack
weixin_31623343的博客
01-06 390
本文转载于 SegmentFault 社区作者：jump__jump专栏：随笔当谈到前端构建工具，就不得不提的功能强大的 Webpack, 尤其是在最新版本中提出了 Module Federation 功能，该功能进一步增强了 Webpack 的实际作用。我相信凭借 Webpack 这几年的积累，恐怕未来几年内没有哪一个打包工具能够与之媲美，但是这并不妨碍我们探讨一下新的工具 Snowp...
Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）
mrliucx的博客
02-21 3007
Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）
[记录]Nginx部署打包的vue项目出现的问题
chris__XU的博客
05-08 246
Nginx部署打包的vue项目,404,白屏报错
004用vite构建vue项目并把发布到nginx
qq_45477065的博客
09-17 2195
好了， 创建成功，我们这条命令中，create是创建的一次，vite@latest是创建最新版本的vite，my-vue-app是我们的项目名称，这个我们可以自己更改的，并且我们创建完之后，下方就显示，完成。然后我们在cmd命令框中输入cd空格 然后直接右键单击粘贴路径，回车，我们发现路径位置并没有变化，是因为我们还没有切换盘符，然后我们输入d：回车就可以切换到我们想要的目录了，对了，这种命令语法叫做DOS语法，感兴趣的同学可以自行百度搜索一下。我们要学习vite项目，可以在官网中一步一步的学习，
Nginx中定义404页面并且返回404状态码的正确方法
09-30
在Nginx中，正确配置404错误页面并返回404状态码对于服务器的错误处理至关重要，尤其是在处理AJAX请求时。当用户尝试访问不存在的资源时，服务器应返回404 Not Found状态码，以便客户端（如JavaScript的jQuery AJAX...
NGINX服务器配置404错误页面转向的方法
09-30
自定义404错误页面是优化网站体验的细节之一，尤其对于大型或多站点环境，应确保每个站点都有恰当的错误处理策略。通过以上步骤，你可以在NGINX服务器上有效地实现404错误页面的自定义，从而提升用户在网站上的体验...
Vue项目History模式404问题解决方法
12-01
然而，当项目使用History模式部署到服务器，尤其是Nginx服务器上时，遇到刷新页面出现404错误的问题，因为服务器无法直接处理这些路由请求。下面我们将详细探讨这个问题的原因以及解决方案。 1. 问题分析： 在...
Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、资源跨域、找不到资源、404-Page Not Found等错误；关于vite build后访问报错
qq_44535402的博客
07-20 1万+
关于Vite打包后本地访问打包文件空白页面 ；关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “
Vue 打包后静态资源加前缀，页面路由加前缀，修改静态资源访问路径
qq_27312237的博客
10-20 1万+
记录一下做过的需求，了解的不多，有不对的地方请指出，谢谢~ 需求是：同一个的服务的同个端口号，根据后面接着的内容不同访问不同的管理系统。 举个例子：http://127.0.0.1:8088/admin 访问的是A管理平台 http://127.0.0.1:8088/test 访问的是B管理平台。 这需要给页面路由,以及访问的静态资源加admin， test。并且配置好nginx。 因为vue-cli版本的不同，文件结构不同，加前缀的方法也不一样。 vue-cli2: 由于我用的是...
nginx转发headers内容丢失解决办法
十步杀一人-千里不留行
02-20 7582
开发网关项目时，在请求时往请求头header中放入了签名sign_key信息，在接收请求时再从header中拿出，在本地调试时是可以的，但上线之后通过Nginx代理之后发现拿不到。nginx代理默认会把header中参数的 "_" 下划线去掉，所以后台服务器后就获取不到带"_"线的参数名。需要在http配置里添加这个参数配置为on。
vue 打包部署在 nginx服务中，以及出现的一些问题
qq_39751996的博客
07-06 5348
首先来说操作步骤 前提： 1、你已经安装/下载好 nginx 2、你的vue 项目已经打包完成，并得到了dist文件夹 部署开始： 1、vue 项目打包，在控制台输入 npm run build 等待打包结束后可在项目的同级目录下得到打包文件夹 dist，中包含了我们要部署的 index.html 文件 2、将下载好的 nginx 压缩包解压后，在文件夹地址栏输入 cmd 后回车后可以直接打开文件路径， 3、在窗口命令行中输入 nginx 启动指令： start nginx 然...
四种方式配置你的nginx跳转
taishanduba的专栏
08-29 5480
前言 最近工作用到了nginx，但是路由配置特殊，业务场景复杂，因此整理了集中nginx跳转的配置方式，如servername的正则，location的匹配顺序，rewrite和proxy的示例，相信总有一种满足你的需求。 一、配置server对应的域名 server name 为虚拟服务器的识别路径。因此不同的域名会通过请求头中的HOST字段，匹配到特定的server块，转发到对应的应用服务器中去。server_name匹配规则：后面可以跟多个域名，第1个是主域名 1.1、精确匹配 如下nginx配置
nginx去除访问连接前缀
一切简单化
02-03 700
nginx去除访问连接前缀
vue项目刷新404处理方式
m0_71966801的博客
07-16 4403
当使用history模式时，URL中不再带有#号，而是正常的URL路径。这种配置使得在刷新页面时，服务器能够正确地返回主应用文件，并且Vue路由能够根据URL路径加载和呈现相应的组件。配置服务器端： 当使用Vue进行单页应用开发时，需要在服务器端进行一些配置以确保在刷新页面时不返回404错误。具体来说，需要配置服务器端路由规则，以便在访问任何URL时都返回主Vue应用的入口文件（通常是index.html）。这样，在页面刷新时，服务器将始终返回主应用文件，并且Vue路由能够正确地加载并渲染相应的组件。
vue-router 4.0 动态路由会跳转到 404 页面的问题
纯爱枫若情的博客
07-10 6901
当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被。为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。
nginx部署vue项目刷新404
07-25
当使用nginx部署vue项目时，刷新页面或访问路由配置页面时可能会出现404错误。这是因为vue项目属于单页面开发，只有一个index.html文件。解决这个问题很简单，只需要将访问重定向到index.html页面，然后由index.html...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值