解决VUE项目window.open()方法打包部署上线报错404

简介: 解决VUE项目window.open()方法打包部署上线报错404

背景:

我的项目是部署在服务器的指定目录下,并且项目的路由模式是history模式,所以我需要在vue.config中配置publicpath和在路由中配置base,配置为相同的字符串,并告诉后端ng映射到我设置的这个字符串上.,此时访问地址可以显示项目页面,但是部分window.open()方法所跳转到的页面会报错404.

报错代码:
window.open('/XXXX/XXXX', "_blank");

 假设我项目设置的vue.config中配置publicpath和在路由中配置base为:'/ABC/',且后端ng也配置了映射"/ABC/"

 对于我的这种情况,是因为我的window.open使用的是简易写法:

window.open('/XXXX/XXXX', "_blank");

 所以,浏览器会直接新开一个窗口,将我输入的url地址作为绝对地址给打开,这时候,在history模式下,当我使用window.open()方法跳转到非路由路径时,浏览器会尝试从服务器获取该路径的资源,但由于没有匹配到任何路由,服务器会返回404错误。(window.open方法没自动带上'/ABC/',而是直接打开了'/xxxx/xxxx',相当于直接访问根目录,因为我的资源放在'/ABC/目录下',所以是访问不到的)

那为什么我们this.$route.push()不会404?

因为我说了前提条件,我的路由配置了base:'/ABC/',路由跳转会自动强写路由基地址到路径,也就是相当于我们的http请求基地址一样,拼接到请求路径前面,那么this.$router.resolve()方法会自动给我们this.$route.push(‘path’)里面写的path前面加上:'/ABC/',所以这样就可以访问到正确的目录。

那是不是每次window.open手动给他加上前缀"/ABC/"就可以了?

是的,但是这样很麻烦,每次都要手动加,那有没有简易方法?

解决方案:

我们可以通过this.$router.resolve()方法,其与路由配置会进行合并,这样就可将路径与路由的配置相结合.

1.  const { href } = this.$router.resolve({
2.          path: `/XXXX/XXXX`
3.        });
4.     window.open(href, "_blank");

这样this.$router.resolve(),方法会自动将路由中的base给拼接到path前面,我们window.open()路由页面就不会404了.

同时,window.open()方法也可以携带参数:
1.  const { href } = this.$router.resolve({
2.          path: '/XXXX', query: {
3.            appid: this.appid,
4.            modelId: modelId
5.          }
6.        });
7.     window.open(href, '_blank');


相关文章
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
4天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
4天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
6月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
76 3
|
6月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
6月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
172 0
|
6月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
141 0
Vue3+Vite+TypeScript常用项目模块详解
|
6月前
|
设计模式 JavaScript
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
|
6月前
|
前端开发 JavaScript Java
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
189 1
|
6月前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
130 0