vue路由使用history模式，项目打包发布后不能通过地址栏里的地址进行路由跳转，跳转404 not found，下面是解决方案

已于 2023-08-29 14:23:01 修改
阅读量602 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
于 2023-08-29 14:18:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58471361/article/details/132560415
版权
本文介绍了如何在后端修改Nginx的配置文件，具体涉及listen、server_name、location块中的try_files和root设置，以指向打包后的项目目录。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 让后端修改nginx的配置文件

server {
        listen       8080;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            try_files $uri $uri/ /index.html;#必须要有的
            root   /home/dist/;#打包后的项目路径，index.html所在文件夹
            index  index.html index.htm;
        }
}

vue2（6）之声明式导航router-link类名&传参/路由重定向/路由两种模式hash&history/编程式导航路径跳转&传参/案例面经基础版/vueCli自定义创建项目/eslint
qq_66318904的博客
05-06 991
router-link的两个高亮类名 太长了，我们希望能定制怎么办声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOMApp.vue
vue路由的两种模式，hash和history的区别
weixin_42371145的博客
02-03 1568
转自：https://www.cnblogs.com/lbcxq/p/12036788.html 1.直观区别： hash模式url带#号，history模式不带#号。 2.深层区别： hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。 如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传 功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的， 咱们把这个页面分享到第三方
[vue-router] history模式下路同无法跳转
qq893182474的博客
03-07 5721
本地dev运行和build-nginx运行，vant的样式异常 和 组件van-popup 包 van-cascader 的弹框显示不出内容！ 出现此问题的上一步是因为项目中配置的cdn无法访问，导致界面加载混乱，所以将cdn的引入屏蔽。但是本地开发时，屏蔽了就导致vue-router报错，点击按钮跳转子路由时无反应，报错如下： 第一次突破，发现如果把屏蔽的cdn打开，就能正常点击了。 问题，但是这是做的移动端网站，手机上加载图书入库时，要选库位（van-popup 包 van-cascader
vue-router模式为history的项目打包发布后不能通过地址栏里的地址进行路由跳转
博客
03-13 7938
项目打包发布后不能通过地址栏里的地址进行路由跳转,地址栏里回车访问就直接404 本项目使用nginx发布，所以这里只有nginx的配置方式。 修改nginx的配置文件 server { listen 8080; server_name localhost; #charset koi8-r; #access_log ...
vue.js的history模式部署在nginx中不能根据地址栏上的路径跳转到相应的路由组件
w601220753的博客
11-26 2108
vue.js的history模式部署在nginx中不能根据地址栏上的路径跳转到相应的路由组件
vue项目上线后在地址栏进行路由跳转出现错误页面，无法正确跳转
weixin_53068161的博客
07-17 2723
vue项目上线后路由跳转出现错误页面，无法正确跳转解决方法： 提示：本文主要介绍遇到vue3项目上线后路由跳转出现错误页面，无法正确跳转的解决方案 解决方法： 更改路由的跳转方式为hash模式： 在router/index.js下添加： import { createRouter, createWebHashHistory } from 'vue-router' 并修改原来的History模式 const router = createRouter({ history: createWebHist
vue中路由模式使用history之后,我用hbuilder打包成app 路由跳转失效了
业余前端的职业经历
05-07 2196
就像标题一样路由模式是history，打包成app确实跳转失效了， 这个时候重新改成 hash模式了可以 也可以不用重新 新建里一个基于hash的vue项目,那样的话代价太大了是把 吧 router/index.js的 mode 改成 hash就可以 然后再重新打包下 histoty模式 是html5 新增的api的 pushState 地址更改而页面不会跳转。 但是只有特定的浏览器才可以，打...
Vue：使用History模式打包时注意事项
yivisir的博客
11-13 4675
Vue: 使用History模式打包时需要注意的事项 1. 前言 今天在使用history模式打包vue项目，后台部署时遇到了种种问题，特地写一篇博客记录一下。 2. 路由配置 在History模式下，在路由配置文件中首先要将mode改为history; 部署项目时，如果在域名后还有额外路径的话，需要注意添加base，作为每次跳转路由时的前缀； 以下是设置样例： // router/index.js export default new Router({ mode : "histor
history模式前端路由部署后访问/刷新页面404问题
Holly1945的博客
12-17 4476
前端路由 实际是路由与组件的映射表 访问任何路径，服务器只需要响应index.html （单页面应用） 浏览器根据不同路由 匹配要渲染的内容 刷新操作时候： 浏览器会带着地址栏路由请求服务器返回相应地静态资源 如果没有找到对应的资源 返回 404 配置nginx: location / { root /... # vue工程的路由是history模式 try_files $uri $uri/ /index.html; // ** 重点加上这个配置 index index.h
vue地址栏直接输入路由无效问题（回车也无效）
zezeadede555的博客
04-10 4097
1、参考网址：https://www.jianshu.com/p/06b004c6772f vue 项目只要不是静态页面，一般都会和官方的路由管理器 vue-router 一起使用。 最近项目有一个需求，是在地址栏输入路由，跳转到对应路由组件，在开发环境中这样做是可以跳转的，但是项目打包后，路由可以访问，但是回车会有404页面的报错 因为 vue 在页面上显示哪个组件是根据 vue-rout...
vue在history模式下nginx配置
qq_43429002的博客
03-17 492
vue在history模式下nginx配置 有前缀 location /xxx { alias D:/xxx/xxx/; index index.html index.htm; try_files $uri $uri/ /xxx/index.html; ... } 无前缀 location / { alias D:/xxx/xxx/; index index.html index.h...
vue打包之后的项目在nginx的部署404,以及无法跳转路由问题
qq_39330397的博客
06-29 7439
常见的使用场景是在单页应用程序（SPA）中，将所有请求都指向主页（如 index.html），然后由前端路由进行处理。这个配置将 /redirect-me 路径的请求重定向到 http://example.com/new-location，并使用 permanent 参数表示永久重定向。你需要将 /path/to/your/static/files 替换为实际的静态文件路径。这个配置将把所有 /old-path/ 开头的请求重写到 /new-path/，并将原始路径中的内容保留。# 指定静态文件的根目录。
Vue.js - 使用History模式反向代理Nginx配置404错误
chaishen10000的专栏
06-01 3024
History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。
【问题】Nginx部署vue项目进行跳转二级路由报404无法找到目标页面问题和Nginx部署vue项目访问不了接口
Trees__的博客
11-24 5670
【问题】Nginx部署vue项目进行跳转二级路由报404无法找到目标页面问题和Nginx部署vue项目访问不了接口
vue在history模式下部署到nginx，无法刷新出页面
Lou_Lan的博客
11-30 1599
概述   在使用vue的vue-router的时候，有时后不想看到路径中的‘#’，所以这个时候就使用感到了mode模式下的history模式，当时使用这个模式之后，打包部署到nginx之后发现只有在IP+PORT的情况下才能出来页面，然而只要端口后面有路径就无法刷新出来页面。 原因描述以及解决方案 export default new Router({ mode: 'history', //后端支持可开 base: '/wtlicence', scrollBehavior: () => (
vue项目上线路径跳转无效(404问题)
Alice_sy314的博客
04-19 6184
在近期做的一个小项目中，本地路由跳转没有任何问题，使用nginx部署上线后出现很多路由无法跳转的问题。经过一番研究，发现可以通过以下两种方式解决。 法一.将路由改为hash模式 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会向后端发出请求。 为什么hash模式下没有问题 router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login 它的特点在于：
解决vue项目route使用history模式，tomcat部署刷新url 404问题
weixin_30702887的博客
11-15 430
在webapps/项目名 创建WEB-INF ，创建web.xml文件 文件内容如下： <?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instanc...
vue+ Tomcat 使用history模式打包后无法加载router-view，空白，点击任意链接无法找到文件。Tomcat部署Vue router History 模式
cc蒲公英的博客
06-29 938
vue+ Tomcat 使用history模式打包后无法加载router-view，空白，点击任意链接无法找到文件。Tomcat部署Vue router History 模式
nginx 部署vue项目，路由模式为history时，页面刷新404问题
IT_dabai的博客
04-03 3927
因为打包部署后，地址栏的地址只是vue的路由，并不是真的文件目录地址。所有的路由都是依赖于SPA单页应用的index.html。所以当刷新时，按照地址栏的地址，找不到对应的文件，就产生404。
vue路由请求
最新发布
03-26
### Vue.js 路由请求使用教程及常见问题解决方案 #### 一、Vue3 中路由跳转传值的方法 在 Vue3 的项目中，通常会搭配 Vue Router 4.x 来管理页面之间的导航和数据传递。以下是几种常用的路由跳转传值方法： 1. **Params 动态路由传参** 动态参数是一种通过 URL 地址栏来传递数据的方式。开发者可以在定义路由时设置动态部分，并在目标组件中获取这些参数。例如，在 `routes` 配置中可以这样写： ```javascript const routes = [ { path: &#39;/user/:id&#39;, name: &#39;UserDetail&#39;, component: UserComponent, }, ]; ``` 当需要跳转并传递参数时，可以通过以下方式进行： ```javascript this.$router.push({ name: &#39;UserDetail&#39;, params: { id: userId } }); ``` 在目标组件中，可通过 `$route.params.id` 获取传递的数据[^1]。 2. **Query 参数传值** 另一种常用方式是通过 Query 字符串的形式附加到 URL 上。这种方式适合用于简单的键值对形式的参数传输。 ```javascript this.$router.push({ path: &#39;/search&#39;, query: { keyword: searchKeyword } }); ``` 同样地，在接收端可以通过 `$route.query.keyword` 访问该参数。 --- #### 二、路由跳转后组件内容丢失的问题及其解决办法 如果在某些情况下发现路由切换完成后，新加载的目标组件未能正常渲染其内容，则可能是由于以下几个原因造成的： - 组件缓存机制未正确配置； - 数据初始化逻辑存在问题；或者是因为父级组件的状态影响子组件的行为等。 针对此现象的一个有效修复手段是在每次进入新的视图之前重新调用生命周期钩子函数 (如 `mounted`) 并执行必要的初始化动作。另外也可以考虑引入 keep-alive 缓存策略以优化性能表现的同时避免不必要的重复计算过程[^2]。 具体代码如下所示： ```html <template> <keep-alive include="cachedView"> <router-view /> </keep-alive> </template> <script> export default { data() { return {}; }, }; </script> ``` 上述例子展示了如何利用 `<keep-alive>` 标签包裹住整个 `<RouterView />`, 同时指定哪些特定名称下的视图应该被保留下来不销毁以便下次快速恢复状态. --- #### 三、关于路由守卫引发的一些典型错误以及对应的调整建议 为了增强用户体验, 我们经常会在实际开发过程中加入全局前置/后置拦截器或者是单独作用于某个局部范围内的导航保护措施(即所谓的 “路由守卫”). 不过如果不小心设计不当的话很容易造成死循环或者其他意想不到的结果发生. 比如最常见的就是忘记调用 next 方法导致浏览器一直处于等待响应状态之中无法继续前进或返回其他位置上去等等情况出现... 为了避免这些问题再次重现出来我们可以遵循这样的原则来进行改进: - 明确区分不同类型的守卫职责所在; - 对所有可能涉及到重定向操作的地方都要格外谨慎对待确保不会误入相同地址从而陷入无限递归陷阱之内.[^3] 举个简单实例说明一下吧: 假设现在有一个登录验证需求存在其中只有经过身份认证之后才能访问受控区域之外的一切公开资源则可以按照下面这个样子去做处理: ```javascript router.beforeEach((to, from, next) => { const isAuthenticated = store.getters.isAuthenticated; if (!isAuthenticated && to.name !== &#39;Login&#39;) { next({ name: &#39;Login&#39; }); // 如果尚未登录且尝试前往非登陆页，则强制转向至登陆界面 } else { next(); // 已经完成鉴权流程或是本来就在允许范围内就直接放行过去即可 } }); ``` --- #### 四、History 模式下刷新页面报错 404 的应对之策 采用 HTML5 History API 构建单页面应用程序(SPA)，虽然能够带来更加平滑流畅的操作体验减少传统多页面架构带来的频繁网络交互开销等问题但是同时也带来了另一个棘手难题那就是每当用户手动输入网址或者点击书签链接的时候服务器端如果没有做好相应准备就会因为找不到匹配的实际物理文件而给出 HTTP Status Code 404 Not Found 错误提示信息给客户端看到显得非常尴尬难堪的局面出现了.. 对此类状况的发生频率较高的 Nginx Web Server 可以采取如下配置修改方案加以规避风险:[^4] ```nginx server { listen 80; server_name example.com www.example.com; location / { root /var/www/html/dist; try_files $uri $uri/ /index.html; # 将未知路径映射回前端入口文件 index.html 处理 } error_page 500 502 503 504 /50x.html; } ``` 以上片段清楚表明了任何不符合现有静态资产列表项都将最终交还给我们的主程序去解析决定下一步该如何行动而不是立刻宣告失败结束任务进程。 --- ### 总结 综上所述，无论是基础功能还是高级特性方面围绕着 Vue.js 所构建起来的一整套生态系统都提供了相当丰富的工具集供广大开发者自由选用组合创造出满足各自业务场景所需的应用作品出来。希望以上的讲解可以帮助大家更好地理解和掌握有关这部分的知识要点！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值