请问vue3+vite项目中，打包生成dist文件后，运行npm run preview预览，是不能请求接口吗？

Question

这是我vite.config.js的配置：

这是我axios的配置:

这是我.env.test的配置：

这是我network的截图：

Answer 1

可以啊，但是得看项目的构建配置。

从截图上面来看能猜测的原因是，请求的接口地址有问题。

1. 比如说请求的接口地址错误，例如不是完整的URL，单纯只有 /api/xxx 这样的使用浏览器拼接的形式。那么本地没有启动对应的服务自然会请求失败。
2. 请求的API地址是完整的，但是本地的接口服务没有启动。或者服务已经启动了但是跨域了。

---

EDIT

首先理解一下 npm run preview 这个命令有什么用。其实就是执行 vite preview 这个命令。它会在本地启动一个 devServer 的 HTTP服务，并指向到当前项目目录下的 /dist 目录。并且会读取 vite.config.js 中的 preview 相关的配置做一些额外的操作，比如代理转发的服务。👉 预览选项

例如说我们在 npm run dev 之前经常会在 vite.config.js 中配置 server.proxy 来进行代理转发避免本地开发过程中的跨域问题 👉 开发服务器选项

---

如果OP你没有配置 preview 相关的配置。那么自然就不会启动代理转发的服务，仅仅会在 /dist 目录中启动HTTP服务。就和我们在 npm run dev 时没有配置 server.proxy 是一样的。
所以如果没有配置的话，会遇到以下几种情况：

1. 请求的接口地址不是完整的，仅仅是 /api/xx 那么浏览器会自动拼接成完整的 http://localhost/api/xxx 这样去请求，我们当前启动的 preview 服务并没有相关的接口服务，自然会请求失败。
2. 如果请求的接口地址是完整的，比如说 http://api.domain.com/api/xxx 那么就得看后端的接口服务是否允许 localhost 这个域名访问，如果不允许的话，自然就是会被浏览器当成跨域请求拦截掉。

所以如果你想使用 vite preview 来测试打包的产物是否可以正常执行，得在 vite.config.js 中配置 preview 相关的配置，并且你的 axios 之类的 HTTP 请求库发起的请求得是正确的（也就是请求到 vite preview 启动的HTTP代理上面，一般都是配置 baseURL 为 /）。不然就会OP你在问题内容描述的请求失败。