不能直接把 Vue 项目源码丢进 XAMPP 的 htdocs 目录运行，因 Apache 不识别 .vue 文件、不支持 ES 模块和 vue-router history 模式，会导致白屏、404 或 net::ERR_ABORTED；正确做法是先构建（npm run build 或 npm run build），再将 dist/ 内容放入 htdocs 子目录，并配置 publicPath/base、.htaccess 重写及 router base 三者一致。
不能直接把 Vue 项目源码丢进 XAMPP 的 htdocs 目录运行——它会白屏、404、报 net::ERR_ABORTED 或 Failed to load module script，因为 Apache 不认识 .vue 文件、不处理 ES 模块导入、也不支持 vue-router 的 history 模式路由。
构建后部署：先 npm run build，再放 dist/ 到 htdocs
Vue CLI（或 Vite）项目必须先构建为纯静态资源，才能被 Apache 正确服务。构建产物是 HTML + JS + CSS 的组合，不含任何构建时依赖。
-
npm run build（Vue CLI）或npm run build（Vite）生成dist/目录 - 检查
dist/index.html中的 script/link 路径是否以./开头（如./js/app.xxxx.js），否则浏览器会从根路径加载，404 - 若路径不对，在
vue.config.js（CLI）中设publicPath: './'；在vite.config.ts中设base: './' - 把整个
dist/文件夹内容复制到XAMPP/htdocs/my-app/（不要只复制dist文件夹本身） - 访问
http://localhost/my-app/—— 注意结尾斜杠必须有，否则 history 路由刷新会 404
vue-router history 模式下刷新 404？加 .htaccess 重写
Apache 默认按文件路径找资源，而 Vue 是单页应用，所有前端路由（如 /user、/admin）都该返回 index.html，否则直接 404。
- 确保
httpd.conf中已启用重写模块：LoadModule rewrite_module modules/mod_rewrite.so前面的#已去掉 - 找到
<Directory "XAMPP/htdocs">区块，把AllowOverride None改成AllowOverride All - 在部署目录（如
XAMPP/htdocs/my-app/）下新建.htaccess文件，内容为：
RewriteEngine On
RewriteBase /my-app/
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /my-app/index.html [L]注意：RewriteBase 必须和你的实际 URL 路径一致（比如部署在子目录 /my-app/，就不能写 /）
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
子目录部署时，router 的 base 必须同步改
光改 publicPath 或 base 配置项不够——vue-router 也得知道它跑在子路径下，否则所有 router.push 和导航守卫都会错位。
- 在
src/router/index.js（或.ts）中，确认base值与部署路径匹配：
const router = new VueRouter({
base: '/my-app/', // 必须和 .htaccess 中的 RewriteBase 一致
mode: 'history',
routes
})- 如果是 Vue 3 +
createRouter，写法类似：base: import.meta.env.BASE_URL || '/my-app/' - 如果用的是 Vite，且
vite.config.ts中base: './'，那base应设为'.'或动态读取import.meta.env.BASE_URL，但最终效果需和实际 URL 结构对齐
开发阶段别碰 XAMPP —— 用 vue-cli-service serve 或 vite 本地起服务
开发时硬塞进 XAMPP，等于主动放弃热更新、Source Map、ESM 支持、代理转发等核心能力，调试效率断崖下跌。
- 保持终端在项目根目录，运行
npm run serve（Vue CLI）或npm run dev（Vite），默认地址是http://localhost:5173或http://localhost:8080 - 若需调用 XAMPP 的 PHP 接口（如
http://localhost/api/user），在vue.config.js配devServer.proxy，或在vite.config.ts配server.proxy - 例如代理所有
/api/请求到 XAMPP：proxy: { '/api': { target: 'http://localhost', changeOrigin: true } }
真正容易被忽略的是三处路径一致性：构建输出路径（publicPath/base）、服务器重写路径（.htaccess 中的 RewriteBase）、路由实例的 base 值——任意一个不匹配，history 模式就崩。
