真机调试时页面显示空白，但开发工具里没问题？

这个问题的关键是资源路径的加载问题，你提到手机端控制台显示 chunk-vendors.css 报 404 错误，这其实是一个很明显的线索。开发工具和真机调试之间的差异通常跟环境配置、资源路径或网络访问权限有关，下面我会分步骤帮你排查。

首先，Vite 在开发模式下，默认会根据你的项目目录结构生成静态资源路径，而这些路径在不同设备访问时可能会出现问题。比如，你的手机通过局域网 IP 访问服务器时，Vite 可能没有正确处理资源的相对路径，导致 CSS 文件或其他静态资源无法加载。

第一步：检查 Vite 配置中的 base 路径
你需要确认 vite.config.js 中是否有设置 base 属性。如果没有设置，或者设置不正确，就可能导致资源路径解析错误。在开发环境下，如果你用的是 --host 参数，建议将 base 设置为 '/'，这样可以确保资源路径是以根路径加载的。修改配置如下：

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';



export default defineConfig({

  plugins: [vue()],

  server: {

    host: '0.0.0.0', // 确保局域网内其他设备可以访问

    port: 3000,      // 端口号保持一致

  },

  base: '/',        // 关键点：设置基础路径为根路径

});

这里为什么要设置 base: '/'？因为 Vite 默认会根据部署环境生成资源路径。如果没设置 base，它可能会使用相对路径，而手机访问时的相对路径和开发工具中的路径可能不一样，导致资源加载失败。

第二步：检查网络请求路径
你提到手机端访问时路径是 http://192.168.1.5:3000，但报错信息显示 chunk-vendors.css 加载失败。这种情况通常是资源路径拼接出了问题。你可以打开手机浏览器（或者微信开发者工具），直接访问 http://192.168.1.5:3000/css/chunk-vendors.css，看看能不能正常加载。如果不能加载，说明 Vite 没有正确处理静态资源的路径。

解决方法之一是确保所有静态资源都能通过绝对路径访问。如果你不想改代码，可以在 Vite 启动命令中强制指定 --base 参数，比如：

vite --host --base=/

第三步：检查跨域和 MIME 类型问题
有时候，手机端访问时可能会遇到跨域或 MIME 类型的问题。虽然你说 console 没有报错，但还是建议检查一下响应头是否正确。特别是 Content-Type，如果 CSS 文件的 MIME 类型不对，某些浏览器会直接忽略加载。你可以用 Chrome 开发者工具的 Network 面板查看 chunk-vendors.css 的响应头，确保 Content-Type 是 text/css。

第四步：检查路由模式
如果你的项目用了 Vue Router，而且路由模式是 history，那么在开发环境下可能会出现路径匹配问题。因为手机访问时的路径和开发工具模拟的路径可能不一致。建议在开发环境中切换到 hash 模式，看看问题是否解决。修改路由配置如下：

import { createRouter, createWebHashHistory } from 'vue-router';



const router = createRouter({

  history: createWebHashHistory(), // 使用 hash 模式

  routes: [

    // 你的路由配置

  ],

});



export default router;

hash 模式的优点是路径不会依赖服务器配置，因此在开发环境下更稳定。

第五步：检查防火墙和网络权限
最后，别忘了检查你的开发机器是否有防火墙限制，或者局域网内的设备是否能正常访问开发服务器。有时候，防火墙会阻止外部设备访问本地服务。你可以尝试关闭防火墙，或者在路由器上设置允许规则。

总结一下排查流程
1. 检查 vite.config.js 的 base 配置，确保资源路径正确。
2. 手动测试静态资源是否能通过绝对路径访问。
3. 查看响应头，确保 MIME 类型正确。
4. 如果用了 Vue Router，尝试切换到 hash 模式。
5. 确认防火墙和网络权限没有问题。

按照这个流程一步步排查，基本可以定位问题所在。这种白屏问题确实挺烦人的，尤其是开发工具里一切正常的时候，但只要耐心分析资源加载路径，总能找到原因。