Vue Router history模式下如何解决相对路径与多路径部署冲突？

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《Vue Router history模式下如何解决相对路径与多路径部署冲突？》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

在 Vue-router history 模式下使用相对路径打包

在 Vue-router 官网的说明中，history 路由模式下无法使用相对路径，而要求在路由中使用 base 选项来匹配路径。然而，当需要同时在多个路径下打包前端代码时，配置一个 base 就会产生冲突。

为了解决这个问题，我们可以通过修改思路，在 nginx 服务器配置中实现相对路径：

1. 打包一份代码，不带 baseUrl

2. 将代码部署到两个端口下：

   • 例如：localhost:9527、localhost:9528

3. 通过 nginx 代理转发：

   • 将 localhost/urlA 代理到 localhost:9527
   • 将 localhost/urlB 代理到 localhost:9528

这样，只需打包一份代码，通过代理转发即可满足在不同路径下使用前端代码的需求。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~