XAMPP 不运行 Vue.js 项目，因其仅提供 PHP/MySQL/Apache 环境；Vue.js 需 Node.js 构建或开发服务器启动，未构建的项目直接放入 htdocs 会因路由、MIME 类型、跨域等问题白屏或报错。
XAMPP 本身不运行 Vue.js 项目，它只提供 PHP/MySQL/Apache 环境；Vue.js 是前端框架，必须通过 Node.js 构建或开发服务器启动，不能直接扔进 htdocs 目录里靠 Apache 解析运行。
为什么直接把 Vue 项目丢进 htdocs 会白屏或报错
Vue CLI 创建的项目默认使用 vue-router（history 模式）、import 语法、单文件组件（.vue）等特性，这些都需要构建（npm run build）转成纯静态 HTML/JS/CSS 后，才能被 Apache 正确服务。如果你直接把 src/ 或未构建的项目根目录放进 htdocs，浏览器会因跨域、MIME 类型错误、404 路由（如访问 /user 时 Apache 找不到对应文件）等问题导致白屏或控制台报 Failed to load module script、net::ERR_ABORTED 等错误。
正确做法：先构建，再部署到 XAMPP 的 Apache
适用于需要在无 Node.js 环境的服务器（比如客户内网仅装了 XAMPP）上展示 Vue 项目，或做简单集成测试：
- 确保项目已安装依赖：
npm install - 执行构建命令：
npm run build（默认输出到dist/目录） - 检查
dist/index.html中的资源路径是否为相对路径（如./js/app.xxx.js），如果不是，需在vue.config.js中设置：module.exports = { publicPath: './'} - 将整个
dist/文件夹内容复制到XAMPP/htdocs/my-vue-app/ - 访问
http://localhost/my-vue-app/—— 注意结尾斜杠不能少，否则 history 路由可能 404
开发阶段别用 XAMPP 启动 Vue，用 vue-cli-service serve
开发时强行塞进 XAMPP 只会失去热更新、ES 模块支持、代理配置（如对接后端 API）、Source Map 等关键能力：
- 保持终端在项目根目录，运行：
npm run serve（等价于vue-cli-service serve） - 它会起一个基于 Webpack Dev Server 的本地服务，默认地址是
http://localhost:8080，与 XAMPP 的80端口互不干扰 - 若需让 XAMPP 的 PHP 接口被 Vue 开发服务器调用，应在
vue.config.js中配devServer.proxy，例如代理/api到http://localhost（XAMPP 默认 PHP 地址）
真正容易被忽略的是路由模式和构建后路径——很多人改了 vue.config.js 却忘了同步更新 router/index.js 里的 base 配置（比如设为 base: '/my-vue-app/'），结果静态部署后所有路由都 404。这不是 XAMPP 的问题，是 Vue 部署模型本身的约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
