脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3配置代理后页面500/404

Vue3配置代理后页面500/404问题

 更新时间：2025年04月03日 10:07:12   作者：Suciy  
这篇文章主要介绍了Vue3配置代理后页面500/404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题

项目基础配置：Vite+Vue-Router 4.0+Vue3

项目进入联调阶段，开始配置接口代理。由于项目需要单点登录，于是就给项目增加了一个域名，也就是vue-router中的base字段。

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory('/my-app'),
  routes: []
})

这个配置需要配合Vite.config.ts的base字段一起修改：

export default ({ mode }) => {
  return defineConfig({
     base: '/my-app'
  })
}

但是配置完后前端页面一直处于404的状态，网络请求显示500，我以为是路由的问题各种排查，甚至把官网Vue-Router的实例down下来，发现人家都是可以的。

最后一个一个配置排查发现，proxy的代理的接口前缀和base重名了,修改代理名称就可以

export default ({ mode }) => {
  return defineConfig({
     base: '/my-app',
     server: {
     open: true,
     port: 3000,
     host: '0.0.0.0',
     proxy: {
        '/my-app': {
          target: '...',
          changeOrigin: true,
          ws: true
        }
      }
    }
  })
}

最后解决方法：调用接口的地方增加一个自定义前缀，在vite.config中proxy配置中，增加一个rewrite即可。

axios.get('/test/my-app/interface1')
 export default ({ mode }) => {
  return defineConfig({
     base: '/my-app',
     server: {
     open: true,
     port: 3000,
     host: '0.0.0.0',
     proxy: {
        '/test': {
          target: '...',
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(/^\/test/, '')
        }
      }
    }
  })
}

溯源

问题是解决了，但是为什么会出现这个问题呢？

  • base：base 是 Vite 配置中的一个选项，用于指定项目的基本公共路径。它决定了在构建和开发过程中加载静态资源的路径。如果你的项目部署在子路径下（例如 https://example.com/my-app/），你可以将 base 设置为 /my-app/，这样 Vite 就会正确地加载静态资源。
  • proxy：proxy 是 Vite 配置中的一个选项，用于配置开发服务器的代理转发。通过 proxy，你可以在开发过程中将特定的 HTTP 请求代理到不同的目标地址。这对于解决前端开发过程中的跨域问题非常有用。

它们看起来独立的配置选项，分别用于不同的功能：

  • base是用于指定项目的基本公共路径，影响静态资源的加载路径。
  • proxy是用于配置开发服务器的代理转发，解决跨域问题。

但是注意base的作用是影响静态资源的加载路径，那么静态文件资源是怎么加载呢？

在vite的源码中（https://github.com/vitejs/vite/blob/main/packages/vite/src/client/overlay.ts），我们可以看见这样一句代码：

可以看见，vite是将base拼接的地址通过fetch加载文件，fetch是一个异步请求，如果此时base与代理地址重名，那么静态资源将会被代理到服务器，所以会出现文件找不到的问题。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 如何通过URL来实现在Vue中存储业务状态实用技巧

    如何通过URL来实现在Vue中存储业务状态实用技巧

    这篇文章主要为大家介绍了如何通过URL来实现在Vue中存储业务状态实用技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-10-10
  • Vue 对象和数据的强制更新方式

    Vue 对象和数据的强制更新方式

    这篇文章主要介绍了Vue 对象和数据的强制更新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue实现商品列表的无限加载思路和步骤详解

    vue实现商品列表的无限加载思路和步骤详解

    这篇文章主要介绍了vue实现商品列表的无限加载思路和步骤详解,基础思路是触底条件满足之后 page++,拉取下一页数据,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下,
    2024-06-06
  • vuejs手把手教你写一个完整的购物车实例代码

    vuejs手把手教你写一个完整的购物车实例代码

    这篇文章主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 详解vue中axios封装与api接口封装管理

    详解vue中axios封装与api接口封装管理

    axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护，在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，本文就给大家介绍一下axios封装与api接口封装管理,需要的朋友可以参考下
    2023-06-06
  • vue3 HighCharts自定义封装之径向条形图的实战过程

    vue3 HighCharts自定义封装之径向条形图的实战过程

    highcharts是国外知名基于javascript的图表库,下面这篇文章主要给大家介绍了关于vue3 HighCharts自定义封装之径向条形图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue部署正式环境上传nginx后遇到的问题及解决

    vue部署正式环境上传nginx后遇到的问题及解决

    在Nginx中配置服务器时,如果页面和静态资源无法访问,并且后端接口被误解为前端页面请求,可以通过为`www-data`用户赋予目录访问权限来解决
    2025-12-12
  • vue后台管理添加多语言功能的实现示例

    vue后台管理添加多语言功能的实现示例

    这篇文章主要介绍了vue后台管理添加多语言功能的实现示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-04-04
  • Vue简化用户查询/添加功能的实现

    Vue简化用户查询/添加功能的实现

    本文主要介绍了Vue简化用户查询/添加功能的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • vue项目引入字体.ttf的方法

    vue项目引入字体.ttf的方法

    今天小编就为大家分享一篇vue项目引入字体.ttf的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论