vue3路由history模式打包后使用nginx代理

已于 2024-10-15 14:25:03 修改
阅读量442 收藏 1
点赞数 2
文章标签： nginx 运维
于 2024-10-15 14:24:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44804419/article/details/142953099
版权

确认前端代码中的文件打包路径/文件夹名称

  • 打包后的文件目录
    在这里插入图片描述
  • 路由文件中的路由模式
    在这里插入图片描述
  • 打包完成后的文件夹名称

配置nginx

  • 注意 vue的history模式需要配合后端(这里使用nginx)
  • try_files $uri $uri/ /index.html; 在/index.html前需要加上代理的一层路径
  • 在这里插入图片描述
  • 多个后端服务的话,需要配置接口代理, 最后三行
不喝可乐_
关注
vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)
qq_52686989的博客
07-02 2099
上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting， 这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。
2024年vue项目路由模式为history时打包后部署在nginx 配置访问，面试题真题
xcbyaya的博客
05-11 442
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《自动化机器学习》
2401_84447328的博客
04-27 836
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
Vue History模式刷新404白屏问题解决方案（Gin框架适配）
最新发布
SuHongMu的博客
03-15 565
API实现URL跳转，不会触发页面刷新。如果直接访问这些路由时，服务端会尝试寻找对应的物理文件，从而导致404错误。前几天在网站上新增了/predict路由，写好后发现每次刷新都会出现404白屏的情况。如果使用nginx上部署vue项目，采用history模式，可以看看这位大佬的文章。Vue-router的history模式通过window.history。查找了资料后，发现是由于后端没有正确配置路由重定向导致。中正确配置路由文件，完善静态文件服务配置。和通配路由 (关键！
vue3 history模式配置及nginx服务器配置
热门推荐
持续学习中
04-11 1万+
vue3开始默认新建的项目都是history模式，不过history模式打包后想要使用正常访问的话，需要后端服务器进行配置才可以，否则可能会出现刷新后404的问题。这样，我们通过访问https://abc.xxx.com/calculator/或者https://abc.xxx.com/calculator/wap/这个路径就可以正常使用了，刷新也不会出现404问题。以上例子中vite.config.js的配置，打包后访问的路径为https://xxx.com/calculator/。
Vue history使用nginx代理
菜虚鲲的博客
05-31 354
nginx.conf server { charset utf-8; listen 80; server_name m.demo.com; gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_min_length 1100; gz
vue路由history模式下的nginx配置
胡西风的博客
04-02 4124
vue路由 history模式 nginx配置
vue项目路由模式为history时打包后部署在nginx 配置访问
2401_84140302的博客
04-11 889
我这里是以子目录 为例。
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...
针对Vue路由history模式下Nginx后台配置操作
01-18
前端将vue路由模式改为history模式后需要运维配置才能正常访问，配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$...
在nginx上部署vue项目(history模式)的方法
08-28
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...
【nginx代理vue项目（打包后）】
【IOS】swiper左右滑动时禁止页面上下滚动
12-14 274
一、nginx代理vue打包项目。
Vue History模式的Nginx配置
宁静致远
11-21 3704
vue history模式下的Nginx配置说明
后端解决跨域问题
weixin_49064195的博客
07-15 180
package com.ebike.webapps.operator.config; import com.google.common.net.HttpHeaders; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.
在nginx上部署vue2/vue3项目(history模式)
qq_41231694的博客
03-27 6897
1、vue项目路由history模式配置(vue2和vue3整个配置就这一步不一样) vue2配置 const router = new Router({ mode: 'history', // 访问路径不带井号 需要使用 history模式 base: '/bank/page', // 基础路径 routes: [ { path: '/count', name: 'count', component: resolve => require(
vue3项目上线配置 nginx代理
前端大白话
02-19 1403
Nginx 反向代理就像是一个“中间人”。想象一下，有很多人（客户端）想要访问一个大型商场（服务器）里的不同店铺（应用服务），但商场为了管理方便，只开了一个大门，所有人都得从这个大门进出。Nginx 就扮演了这个大门的角色，客户端的请求先到达 Nginx，然后 Nginx 根据一定的规则把请求转发到商场里对应的店铺，最后再把店铺的响应返回给客户端。在 Vue 3 项目里，Nginx 反向代理可以帮我们解决跨域问题、实现负载均衡等。
配置nginx以支持vue中history路由模式
Eiwen的技术生涯
07-03 287
【代码】配置nginx以支持vue中history路由模式。
Vue3.js+Nginx 之代理，反向代理(Vue代理部署不生效)
qq_70282850的博客
01-15 1839
Vue代理部署上线不生效
vue history nginx配置
mrzhangdulin的博客
08-08 2231
增加： try_files $uri $uri/ @rewrites; #工作模式及连接数上线 events { worker_connections 1024; #单个工作进程 处理进程的最大并发数 } http { include mime.types; default_type application/octet-stream; #sendfile 指令指定 nginx...
用Nginx将前端Vue项目部署到云服务器（含代理实现请求跨域）
m0_62556296的博客
10-24 3398
记录使用Nginx将的Vue3项目部署到阿里云服务器（Ubuntu 22.04）上，包含通过Nginx代理实现、以及个人踩坑记录~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值