解决Vue封装Axios后页面拦截器手动刷新无效的问题

项目类型：vue vux axios

首先将Axios封装在http.js文件中，然后为了使用VUX的提示框消息，直接在main.js中编写拦截器。直接调用接口，一切正常。

但是由于返回值有统一的代码错误代码提示，所以在拦截器中加入了代码的判断来统一返回值。起初，一切都按照预期的结果进行。在一个黑暗多风的夜晚，我头晕目眩，按下F5手动刷新页面。我惊讶地发现拦截器失败了。我没有截取外面的Coode Json代码层，而是直接把服务器的所有Json数据都砸在了我的脸上。我以为是接口问题，但是console直接打印的数据，登录组件是正确的。

然后我突然想到一个问题。如果直接点击页面返回就可以了，但是如果按F5手动刷新，Axios就不会直接转到main.js中的拦截器代码了

后来，我把拦截器放在封装的http.js中，一切正常。但是放在外面之后，vux的提示插件就不能用了。

我打印了这个指针，但它没有指针。后来，我想到了一个更灵活的方法。我在index.html增加了一个var app，在main中存储初始化的vue对象，在main.js中将初始化的vue对象分配给windows.app，这样就可以全局使用了。

在window.app.$vux.toast.show中添加vux提示代码，完美解决问题！

摘要

以上是边肖介绍的解决方案，解决了在Vue中打包Axios后手动刷新页面拦截器的无效问题。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！