解决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');


相关文章
|
12天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
11天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
15天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
23 6
|
11天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
缓存 资源调度 前端开发
用webpack4带你实现一个vue的打包的项目
一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置,一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤。
2974 0
|
4天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
4天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
12天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
30 9
|
11天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
10天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
14 2