vue + nginx服务器+history模式多也i面路由正确配置

最新推荐文章于 2024-09-12 09:04:01 发布
最新推荐文章于 2024-09-12 09:04:01 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： vue 文章标签： vue nginx history 路由 刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bobo5582191/article/details/97027459
版权

vue + nginx服务器+history模式多页面路由正确配置

问题介绍: 包括多个页面, 每个页面通过路由进行跳转, 发现配置history模式后, 出现一下问题

  1. f5刷新页面报错,找不到加载路径
  2. home页面无法完全显示.
    项目的路由和页面截图如下
    在这里插入图片描述
    在这里插入图片描述

解决方案如下

  1. 部署路径配置: vue.config.js
    在这里插入图片描述
  2. router路径配置:
    在这里插入图片描述
  3. nginx配置
    在这里插入图片描述
    在这里插入图片描述
  4. reload nginx问题搞定; f5刷新和调整问题得到解决
bobo5582191
关注
专栏目录
Nginx多套环境配置及常见路由策略
wd520521的博客
06-24 3752
一、配置nginx 1、进入 nginx\conf 目录下，用文本编辑器打开 nginx.conf，对配置文件进行如下修改： （1）在 http 中增加 upstream，并配置两台环境的地址； #有几套环境，就配置几条 upstream pcservice{ server 10.101.137.244:8224 ; #节点1 server 10.101.137.245:8081; #节点2 } http..
Vue3+Ts+Vite+History模式，部署在三级目录下
weixin_39964419的博客
02-05 592
Vue3+Ts+Vite+History模式，项目打包后部署到Nginx三级目录下，并且经过一次Nginx转发。项目打包部署后，页面访问空白
Nginx: Vue路由history模式下，publicPath配置为子目录时，页面刷新报404错误
Hxp_Scau的博客
01-14 6727
今天在部署项目时遇到的问题，在网上都找不到解决方法（或许自己没找对），所以自己捣鼓了下，测试加分析定位bug，最后总算解决了，所以要记录一下。 1. 问题描述 vue项目打包后部署到Nginx，Nginx作为静态服务器 项目路由启用HTML5的history模式 项目路径：html/some/path（Nginx的HTML目录） publicPath：配置为 /some/path/ （v...
Nginx配置文件+VUE路由项目实例.zip
12-07
VUE history模式下的VUE示例 跨越微信五个支付目录限制的Nginx配置 VUE打包上线后的Nginx配置 配合我的文章说明使用, 效果更佳哦 文章: VUE history模式, 后端配置, 微信支付目录限制
nginx在同一域名下部署多个vue项目
IICOOM的博客
08-11 420
本文介绍使用nginx服务器在下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。
nginx location 正则配置多个路由模块
qq_31455841的博客
11-13 1462
nginx location 正则配置多个路由模块
nginx多站路由配置tomcat
weixin_33751566的博客
10-09 278
server { listen 80; server_name 1.goal.cn; index index index.html index.htm index.jsp; root /www/server/tomcat/1/ROOT/; location / { ...
Nginx配置和路由
qq_35059264的博客
07-16 9104
勿以浮沙筑高台 Nginx 高性能web服务器 Nginx安装 1.下载Nginx Nginx下载地址：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.18.0.tar.gz 2.安装Nginx需要的依赖环境 因为nginx是C语言编写的因此需要c语言环境 yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-d
vue-router+nginx 非根路径配置方法
08-27
在使用 vue-router 的 History 模式时，我们需要在 nginx 中添加相应的配置，以便正确地处理路由请求。在根路径下配置的示例代码如下： location / { try_files $uri $uri/ /index.html; } 该配置将所有路由请求...
Vue下路由History模式打包后页面空白的解决方法
08-27
使用 History 模式需要正确地配置路由的 base 参数和服务器的路由配置，以便解决页面空白的问题，并且让 Vue 路由正确地解析 URL。 知识点： 1. Vue 路由的两种模式：Hash 模式和 History 模式 2. History 模式的...
针对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-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
vue.js的history模式部署在nginx中不能根据地址栏上的路径跳转到相应的路由组件
w601220753的博客
11-26 2046
vue.js的history模式部署在nginx中不能根据地址栏上的路径跳转到相应的路由组件
vue路由 & nginx路由
Yangyeon_的博客
07-21 2463
两者区别！！！vue：拼接（拼接时将本身和后面的都拼接到target后面）nginx：替换（将本身和前面的都替换为target，后面的照常放在那即可）
Nginx 处理 Vue 客户端路由
exlink2012的专栏
09-12 515
在使用 Nginx 部署 Vue 项目时，由于 Vue 是单页面应用（SPA），客户端的路由是由前端（Vue Router）管理的，而不是通过服务器端的路由。为了确保当用户直接访问非根路径（如/about或）时，Nginx 不返回 404 错误，而是重定向到index.html，让 Vue Router 处理路由。
nginx与vue路由
m0_61982496的博客
11-29 712
vue代理方式在不加 replace("/sign-system", "") 的时候，是将标识符追加到target后边；当加 replace("/sign-system", "") 语句后，原理则与nginx方式相同。
【vue项目部署】vue路由在多级页面下，页面刷新空白（history模式下）的排查过程&问题解决
记录
01-03 1727
在项目打包部署后，出现了多级目录刷新后白屏的问题。记录一下排查过程与解决方法。
Nginx部署vue项目history的路由模式（非根目录）
qq_28016751的博客
12-16 4598
vue的路由分为两种hash和history，hash路由虽然不需要做太多的配置但是url地址上会有一个很丑的#号。 而history模式的路由不会有这个#号但是带来的问题却是刷新页面之后会404找不到页面，原因是spa单页面是通过js来进行跳转的。浏览器根据路由地址是找不到服务器上相关的文件的，所以这里需要进行相应的服务器配置。 这里我选用的是nginx服务器。 VUE项目(我的vue-cli版本4.x) 1. vue.config.js 2. router.js 3. nginx配置..
nginx部署vue项目，路由配置，后端访问接口配置
weixin_45393413的博客
08-22 8261
nginx部署vue项目，配置前端项目访问子路径，后端访问接口路径配置
nginx 部署 vue3 项目 History路由模式，要怎么配置nginx
最新发布
09-19
Nginx部署Vue3项目时，特别是在使用History路由模式下，你需要配置服务器来支持静态文件和处理动态请求到应用服务器。以下是基本的步骤： 1. **设置Nginx server block**: 创建一个名为`vueapp.conf`的虚拟主机...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值