VUE项目打包后路由跳转失败解决方案（页面跳转空白）

最新推荐文章于 2024-04-20 00:45:00 发布
最新推荐文章于 2024-04-20 00:45:00 发布
阅读量2.7k 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tyKuoHai/article/details/113644294
版权
本文介绍了Vue项目打包后遇到路由跳转失败的问题，通过在打包后的文件夹内添加WEB-INF文件夹，并创建web.xml配置文件，有效解决了页面跳转空白的难题。
摘要由CSDN通过智能技术生成

在打包好的项目文件夹内添加文件夹 WEB-INF

然后在WEB-INF文件夹内添加 web.xml文件
在这里插入图片描述

文件内容

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
最低0.47元/天 解锁文章
快乐大狗蛋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
花裤衩 / vue-element-admin 的项目打包后发现不能跳转页面问题解决
qq_40410916的博客
10-11 2039
项目install后build打开html文件跳转页面没有反应 原因：因为项目中import Cookies from ‘js-cookie’ 使用无法进行页面跳转需要放到web服务上才能运行。 解决：把所有Cookies.set(‘sidebarStatus’, 1) ，set和get 都换成localstorage或sessionstorage 其他 Cookies.set('sidebarStatus', 1) localStorage.setItem('sidebarStat
vue2.0项目实现路由跳转的方法详解
08-27
在 Vue 项目中，路由跳转是必不可少的一部分，通过路由跳转，用户可以在不同的页面之间进行跳转，提高用户体验。下面我们来详细介绍 Vue2.0 项目实现路由跳转的方法。 一、安装路由 首先，我们需要安装 Vue 路由...
vue打包后放到服务器上路由不跳转，可能只需一步就解决了。
热门推荐
王小森的成长博客
08-11 1万+
将路由配置文件中的mode:'history’注释掉，或者改为hash。 因为为history的时候需要后台配置若找不到资源定位到依赖页面。
vue切换页面白屏问题怎么解决
最新发布
qingdouxiaohua的博客
04-20 1377
Vue 切换页面时出现白屏问题，可能由多种原因引起。
vue打包之后的项目在nginx的部署404,以及无法跳转路由问题
qq_39330397的博客
06-29 6459
常见的使用场景是在单页应用程序（SPA）中，将所有请求都指向主页（如 index.html），然后由前端路由进行处理。这个配置将 /redirect-me 路径的请求重定向到 http://example.com/new-location，并使用 permanent 参数表示永久重定向。你需要将 /path/to/your/static/files 替换为实际的静态文件路径。这个配置将把所有 /old-path/ 开头的请求重写到 /new-path/，并将原始路径中的内容保留。# 指定静态文件的根目录。
vue打包后页面为空白或者路由跳转404解决
qq_24683975的博客
01-10 1873
build后生成的dict文件夹内的index.html打开是空白页面，此时在。编辑nginx配置文件，添加如下代码。
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
2. **配置Vue Router的`base`**：在`router/index.js`中，设置`base`为相同的上下文路径`'/api/'`，确保路由跳转与上下文路径一致。 3. **配置Ajax请求的基础URL**：对于使用axios或其他HTTP库进行的Ajax请求，需要...
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
10-18
今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue单页路由跳转后scrollTop的问题
10-18
当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以采用两种方法： 1. **全局滚动回调**： 在`main.js`文件中，我们可以监听Vue Router的`afterEach`钩子函数。这个...
vue实现登录后页面跳转到之前页面
01-19
1.router.currentRoute:当前的路由信息对象，我们可以通过router.currentRoute.fullPath获得解析后的 URL，包含查询参数和 hash 的完整路径，如果要访问的页面的路由有命名（name）的话，可以通过router.current...
解决vue+router路由跳转不起作用的一项原因
11-20
如下所示： Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:’history’, 原因如下 补充知识：vue-router配置后地址栏输入跳转不
解决使用vue.js路由后失效的问题
11-29
新学了vue.js中的路由 在之前写的vue的demo上加上了简单的路由例子(来自vue-router 2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的) 附上部分代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-defau
解决vue-router进行build无法正常显示路由页面的问题
11-27
使用vue cli创建一个webpack工程 加入vue-router然后使用路由引入一个新的组件。这时路由和链接是这样写的 const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/first', component: firstCom } ] }) <a>Try this!</a> 1、npm run dev查看没有问题 2、npm run build打包 3、起一个服务（例如：
vue 打包路由报错_急急急急，vue打包部署后，路由无法跳转
weixin_29144945的博客
02-22 1974
求助vue打包部署后首页可以正常访问，可是一但点击下一步；就没反应；控制台报错：(打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下，但是在index.html文件中的link路径也做过修改)我的vue.config.js是：`module.exports = {// 基本路径publicPath:"./",// 输出文件目录outputDir: 'dist',// webp...
vue3+electron 解决打包后首页打开空白，以及打包后路由不跳转等问题
weixin_45578532的博客
11-30 4835
所以有路由功能，当我们运行npm run electron:serve的时候，最后可以直接加载http://localhost:8080。在终端里面就可以显示页面。问题原因：因为请求接口报错就在控制台打印了一下信息，本地环境有这个console.log，但是打包生成后.exe文件里的控制台无这个console.log。，所以加载的是静态页面，win.loadURL("file://./index.html")。在项目中登录等存储token，运用到了js-cookie这个库，cookie是来操作浏览器的。
vue3.0项目打包后路由跳转空白
ansinie的博客
04-16 1315
开发的时候一顿操作，打包后啥都没有，一片空白，鼓捣半天原来是这样（淦） 1.你的打包配置路径的问题 在vue.config中修改 //打包配置 publicPath: === './', outputDir:=== 'dist' ，` 2.路由的问题，在vue3.0中自动创建的router文件中默认的是 history模式，这个模式需要后端配合，怎么配合我也不知道啦（嘿嘿） history: createWebHistory(process.env.BASE_URL), 我们改成h
vite 打包上线后页面静止一段时间（半小时+）路由跳转无响应
qq_45840993的博客
01-11 1634
项目在本地开发没问题，但是打包到测试环境时发现页面无操作静止半小时+后，点击事件、接口等都无异常，页面跳转失效，（window.open正常，router.push、router.go(-1)等失效），查看控制台报错触发路由跳转时，报错。
vue中路由模式使用history之后,我用hbuilder打包成app 路由跳转失效了
业余前端的职业经历
05-07 2056
就像标题一样路由模式是history，打包成app确实跳转失效了， 这个时候重新改成 hash模式了可以 也可以不用重新 新建里一个基于hash的vue项目,那样的话代价太大了是把 吧 router/index.js的 mode 改成 hash就可以 然后再重新打包下 histoty模式 是html5 新增的api的 pushState 地址更改而页面不会跳转。 但是只有特定的浏览器才可以，打...
vue项目本地正常运行，打包到线上时无法访问js等资源
生而为人我很抱歉
12-11 1327
config/index.js文件的build/assetsPublicPath应该配置成和nginx（或tomcat）一致。
vue3项目history模式路由跳转后回到页面顶部
05-24
可以在路由切换时，监听路由变化，然后使用 `window.scrollTo()` 方法将页面滚动到顶部。 具体实现方法如下： 1. 在组件中引入 `reactive` 和 `onMounted` 两个函数： ```javascript import { reactive, onMounted } from 'vue' ``` 2. 在组件中定义一个存储页面滚动位置的对象： ```javascript const scrollPosition = reactive({ x: 0, y: 0 }) ``` 3. 在组件中使用 `onMounted` 函数，监听页面加载完成后的事件，记录当前页面的滚动位置： ```javascript onMounted(() => { scrollPosition.x = window.pageXOffset scrollPosition.y = window.pageYOffset }) ``` 4. 在组件中使用 `$router.afterEach()` 函数，监听路由变化后的事件，将页面滚动到顶部： ```javascript $router.afterEach(() => { window.scrollTo(0, 0) }) ``` 5. 在组件中使用 `$nextTick()` 函数，等待页面渲染完成后，将页面滚动到之前的位置： ```javascript $nextTick(() => { window.scrollTo(scrollPosition.x, scrollPosition.y) }) ``` 完整代码如下： ```javascript <template> <div> // 组件内容 </div> </template> <script> import { reactive, onMounted } from 'vue' export default { name: 'MyComponent', setup() { const scrollPosition = reactive({ x: 0, y: 0 }) onMounted(() => { scrollPosition.x = window.pageXOffset scrollPosition.y = window.pageYOffset }) $router.afterEach(() => { window.scrollTo(0, 0) }) $nextTick(() => { window.scrollTo(scrollPosition.x, scrollPosition.y) }) return {} } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值