解决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()方法,其与路由配置会进行合并，这样就可将路径与路由的配置相结合.

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

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

同时,window.open()方法也可以携带参数:

 const { href } = this.$router.resolve({
         path: '/XXXX', query: {
           appid: this.appid,
           modelId: modelId
         }
       });
    window.open(href, '_blank');