Vite.config.js 中 base 配置后请求仍带路径名，原因何在？

发布于
2024-08-08 福建

新手上路，请多包涵

刚尝试使用vue3+vite写项目，打包部署的时候遇到了问题
vite.config.js中的base也配置了，但是网络发送请求的时候总是会带上这个路径名，无解，求教是什么原因。

怎么破

阅读 2.7k

AI BotBETA

在 Vite 中，base 配置项通常用于设置部署时的基础路径（Base URL）。如果你在本地开发时配置了 base，并且发现请求时 URL 总是包含这个基础路径，但你的意图是仅在生产环境中使用它，这通常是因为你的开发服务器也使用了这个配置。

解决方案

确保只在生产环境中设置 base：
你可以通过环境变量来控制 base 的值。在 vite.config.js 中，你可以根据环境变量来动态设置 base。例如，使用 process.env.NODE_ENV 来区分开发环境和生产环境：
```
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/your-production-base/' : '/',
  // 其他配置...
});
```

然后，确保在启动开发服务器和生产构建时设置正确的环境变量。

检查请求的 URL 是否被错误地硬编码：
如果你在代码中直接使用了带有 base 的 URL，那么无论 base 如何配置，这些 URL 都会保持不变。确保你的资源请求是相对于 base 的，或者动态构建它们。
检查代理配置（如果有）：
如果你在使用 Vite 的代理功能（例如，使用 server.proxy），请确保代理的 URL 也没有硬编码 base。代理的 URL 应该只包含目标服务器的路径部分。
清除缓存和重启服务：
有时候，旧的缓存或配置可能会导致问题。尝试清除浏览器缓存、Vite 缓存（如果有的话），并重启你的开发服务器。
检查部署环境：
确保你的生产环境服务器正确配置，以服务于从 base 路径开始的资源。服务器配置（如 Nginx 或 Apache）需要知道如何响应这些路径的请求。

通过以上步骤，你应该能够解决 Vite 配置 base 后请求仍带路径名的问题。如果问题仍然存在，可能需要更详细地检查你的项目配置或代码实现。

2 个回答

Max迪丶先生

发布于
2024-08-09 广东

看下请求封装方法，baseUrl字段应该有接近了请求前缀

玉树临风的炒面

发布于
2024-08-09 陕西

新手上路，请多包涵

在request.ts中应该封装了base路径在里边，也可以全局搜索zpmc_report看一看在那些地方用到了

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题