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

Question

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

怎么破

Answer 1

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

解决方案

1. 确保只在生产环境中设置 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/' : '/',
     // 其他配置...
   });

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

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

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