vue路由history模式 部署到nginx服务器 直接访问路由/刷新 404

最新推荐文章于 2023-01-04 10:59:16 发布
最新推荐文章于 2023-01-04 10:59:16 发布
阅读量782 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LGDmar/article/details/106115010
版权

nginx.conf配置

location / {
  try_files $uri $uri/ /index.html;
}
LGDmar
关注
Vue路由刷新时出现404问题的解决方案
ByteWhisper的博客
08-16 7318
这样，当在浏览器中刷新页面时，服务器会返回index.html，并由Vue Router来处理相应的路由逻辑。具体做法是，在路由跳转时使用history.pushState来修改URL，使其对应到正确的路由路径。然而，当用户手动刷新页面或直接输入某个路由地址时，由于服务器并没有为该路由提供相应的资源，就会导致404错误。根据具体情况选择适合的解决方案，可以有效地解决路由刷新时的404问题，并提升用户体验。当我们将项目部署到服务器的子目录时，配置正确的基本路径可以避免路由刷新时出现404问题。
vueHistory 模式下，布置到服务器上路由刷新会报nginx404错误
qq_29069777的博客
10-08 182
之前写完vue项目后，布置到服务器，用nginx反向代理后，一开始进去，进各种路由都是没问题的，但是一旦f5刷新后就会出现一个nginx404的错误。 经过翻阅vue文档后，发现这是vueHistor...
Vue 发布服务器(Nginx)后访问路由报错 404
卡尔特斯
03-18 510
server { # 监听端口 listen 8089; # 主机名称 server_name www.dzm.com; # 根目录 root /usr/local/var/dzm; # 匹配协议 # location / { # index index.html; # } # 上面 / 的匹配协议换成这个 location / { try_files $uri $uri/ /index.
vue-cli3 history模式下部署的各种坑
菜鸟的博客
08-22 1952
谈到history路由模式部署我就想骂人，官方指导价： 第一步： const router = new VueRouter({ mode: 'history', routes: [...] })
Vue项目设置默认打开某一个路由
热门推荐
for_weber的博客
06-12 1万+
    Vue项目打包自启动浏览器后一般会打开 http://localhost:8080/#/    因为没有设置默认需要打开的路由，因此路由没有重定向。    解决办法很简单，只需要在定义router的时候设置默认的路由就好。        在routes数组（指第一层）添加一个新的json对象{path: '*', redirect: '/根路由/指定路由'}    重新打开页面就可以看到页...
vue项目中打包完成后如何外部链接打开项目中的某个路由页面？
L_eiDigaga的博客
10-21 4144
vue项目开发打包完后 如何从外部链接跳转到项目中的某个路由页面？ 因为vue是单页面应用，所以项目打包完后只有一个index.html文件，然后一切跳转都是有内置的路由来实现，但是当我们从外部链接跳转的时候，，好比这样要直接从外部跳转到paintList这个路由页面，可是这时候会报错404，提示找不到页面，因为你打包完后就只有index.html文件，并没有paintList.html这个文件，...
vue项目部署到nginx/tomcat服务器的实现
10-16
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...
Vue下路由History模式打包后页面空白的解决方法
12-09
当用户在 History 模式下刷新页面或直接访问某个子路由时，服务器需要能够正确地将所有请求重定向到 `index.html`，以便 Vue Router 能够接管并解析路由。对于 Nginx 服务器，可以添加以下配置来实现这一目标： ```...
Vue路由history模式解决404问题的几种方法
10-17
为了解决Vue路由history模式下的404问题，可以采用以下几种方法： 1. 服务器配置重定向 在服务器配置中，可以设置所有请求都重定向到入口文件（通常是index.html）。使用Nginx服务器时，可以在配置文件中添加如下...
针对Vue路由history模式下Nginx后台配置操作
01-18
前端将vue路由模式改为history模式后需要运维配置才能正常访问，配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$...
Vue中Router路由使用history模式发布后访问404
句无声的博客
01-28 6255
使用webpack打包发布，网页不能正常访问，先看下路由配置 export default new Router({ mode: 'history', base: '/putian/', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/ClusterManage', name: 'ClusterMana
解决Vue项目history模式下打包部署到云服务器，访问路径，重复点击路由，刷新报404异常的问题！！！
m0_57249797的博客
10-22 1853
history模式下打包部署的访问路径 以下步骤皆以Tomcat为例 部署位置是Tomcat的webapps包下（可以自己配存放位置，这里不是重点） 打包路径问题一，保证Vue的路由路径与我们部署在webapps包下的路径一致 问题二，在项目目录下新建vue.config.js文件，增加配置： module.exports = { publicPath: './', assetsDir:'static', lintOnSave: true, productionSourceMap: fa
vue项目路由模式为history时打包后部署在nginx服务器后，刷新页面空白的问题
u011295864的博客
07-16 4964
放在nginx服务器根目录下的情况： vue.config.js配置： publicPath: '/' router配置： base: '/', mode: 'history' nginx配置文件： location / { try_files $uri $uri/ /index.html; root html; index index.html index.htm; } 放在nginx服务器根目录下一个子目录下的情况（以子目录名称是demo为例）： vue.
【Vue - history 路由模式】 - 直接访问链接报 404 错误，已解决。
Chon.Wang
01-04 814
【Vue - history 路由模式】 - 直接访问链接报 404 错误，已解决。
Vue添加动态路由后，不同角色访问“/”产生404问题
Moon Star
08-24 3209
若依二次开发，不同角色访问对应不同的首页，访问地址“/”一直跳转到404页面的问题。 ​
vue路由上的#/怎么去掉_vue路由history模式_如何去除vue项目中的#
weixin_36165323的博客
02-22 865
在使用vue围幸业很例站闪以近着好务多如宽动为近着好-cli搭建的环境中，浏览器上URL地址中是存在'#'的，这是由于vue-router 默认 hash 模式，不难发现#的出现真的很丑陋。官网给出了如何使用history模式，例如浏刚学互久维数曾总屏果以。公实式带近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我...
vue项目部署到服务器上，使用history路由模式引起二级路由页面丢失的问题解决方法
weixin_49210760的博客
05-21 3592
路由配置 第一次可以出现，再划线就丢失 1.首先如果想要在前端使用hisroty模式的时候需要后端的配置 后盾配置一般固定 下面是我们后端的配置，仅供参考 其中有关history刷新丢失的问题,在于划线的try file 再看前端设置 1.切换路由模式，这个省略 2.需要在vue.config.js中配置publicPath 如图所示 如果想要在开发和生产的时候都用history模式就按照上面的判断环境变量设置 这里注意 在开发的时候，如果你的项目没有做特殊的处理那么想要使用history就的设.
nginx部署vue项目，给访问路径加前缀,配置同源策略
lp-Strive的博客
06-01 5750
nginx部署vue项目，给访问路径加前缀,配置同源策略
vue 路由history模式 项目打包刷新后出现404 apache、nginx环境，如何解决
最新发布
06-16
在 Vue 路由的 history 模式下，刷新页面会导致 404 错误的出现，这是因为浏览器会向服务器发送请求，但服务器并没有对应的路由，因此就会返回 404 错误。解决这个问题的方法有两种： 1. 配置后端服务器 如果你的 Vue 项目部署在 Apache 或 Nginx 等 Web 服务器上，你可以配置服务器来处理这个问题。具体做法是，在服务器上配置一个重定向规则，将所有的 URL 请求都重定向到 index.html 文件上。以 Apache 服务器为例，可以在 Apache 的配置文件（如 httpd.conf）中添加以下规则： ``` <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` 这个配置将所有的 URL 请求都重定向到 index.html 文件上，这样即使刷新页面，服务器也会返回正确的内容。 2. 使用 hash 模式 如果你不想在服务器上配置重定向规则，你可以考虑使用 hash 模式。在 hash 模式下，Vue 会使用 URL 中的 # 符号来表示路由，这样即使刷新页面，浏览器也只会重新加载 index.html 文件，而不会向服务器发送请求。要启用 hash 模式，只需要在 Vue 路由的配置中添加以下代码： ``` const router = new VueRouter({ mode: 'hash', routes: [...] }) ``` 这样就可以启用 hash 模式了。需要注意的是，hash 模式下，URL 中的 # 符号后面的内容不会被发送到服务器，因此你需要在前端代码中使用 JavaScript 来解析 URL 中的 hash 值，并根据这个值来渲染不同的页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值