Vue项目需先执行npm run build生成dist静态文件，再将其整体复制至Apache可服务路径（如htdocs/my-vue-app/），并配置publicPath、vue-router base、启用mod_rewrite、设置AllowOverride All及正确.htaccess重写规则，否则history模式下刷新将404。
Vue 项目不能直接丢进 htdocs 就跑起来 —— 它需要构建为纯静态文件，且 Apache 必须正确处理前端路由（如 vue-router 的 history 模式）和 MIME 类型，否则会 404 或白屏。
build 后的 dist 目录必须放在 Apache 可服务路径下
Vue CLI 默认执行 npm run build 生成 dist/ 目录，它才是真正的静态产物。这个目录不能有中文、空格或特殊符号，且必须被 Apache 显式识别为可访问资源。
-
dist文件夹要整体复制到XAMPP/htdocs/my-vue-app/（Windows）或/opt/lampp/htdocs/my-vue-app/（Linux/macOS），不能只复制里面的内容 - 确保
dist/index.html存在，且内部引用的 JS/CSS 路径是相对路径（如./js/app.xxx.js），否则需在vue.config.js中设publicPath: './' - 若用
public/下的静态资源（如favicon.ico），构建后它们会自动合并进dist/，无需额外配置
Apache 必须启用 mod_rewrite 并允许 .htaccess 覆盖
Vue Router 的 history 模式依赖服务端将所有非资源请求回退到 index.html，否则刷新页面会 404。XAMPP 默认禁用重写模块，且默认拒绝 .htaccess 生效。
- 编辑
XAMPP/apache/conf/httpd.conf，取消注释：LoadModule rewrite_module modules/mod_rewrite.so - 搜索
<Directory ".*htdocs">块，在其内部把AllowOverride None改成AllowOverride All - 在
my-vue-app/根目录（即dist所在目录）新建.htaccess，内容为：
RewriteEngine On
RewriteBase /my-vue-app/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /my-vue-app/index.html [L]注意：RewriteBase 必须与你实际访问路径一致（如部署在子路径 /my-vue-app/），不可省略或写错。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
浏览器访问时路径和端口要匹配 Apache 实际监听配置
XAMPP 默认监听 80 端口，但常被占用，多数人改成了 8080 或 8081。如果修改过端口，httpd.conf 里 Listen 和 ServerName 必须同步更新，否则请求根本进不了 Apache。
- 确认
httpd.conf中有类似：Listen 8080和ServerName localhost:8080 - 重启 Apache（XAMPP 控制面板点 stop → start，或命令行
sudo /opt/lampp/lampp restartapache） - 浏览器访问地址必须带端口：
http://localhost:8080/my-vue-app/，少一个斜杠或端口都可能触发 404 - 若用虚拟主机（
httpd-vhosts.conf），还需在hosts文件加解析，且DocumentRoot必须指向dist所在目录，不是 Vue 源码目录
常见白屏/404 场景与对应检查点
构建产物没问题，但页面空白或报 404，大概率是路径或重写规则没对上，而不是代码逻辑错误。
- 打开浏览器开发者工具 → Network 标签页，刷新页面，看第一个
index.html是否返回 200；若返回 404，说明 Apache 根本没找到该文件 —— 检查DocumentRoot或 URL 路径是否多了一级 - 若
index.html成功加载，但 JS/CSS 请求 404，说明publicPath配置错误或.htaccess未生效 —— 查看 Network 中请求的完整 URL 是否含多余前缀（如/my-vue-app/js/xxx.js却被发成/js/xxx.js） - 若点击路由跳转正常，但手动刷新页面 404，说明
.htaccess未生效或规则不匹配 —— 检查 Apache 是否真的加载了该文件（可故意写错语法，看重启时是否报错） - Linux/macOS 下注意文件权限：
chmod -R 755 my-vue-app，Apache 进程用户（如daemon或www-data）必须有读取权
最易忽略的是：构建后忘记清空浏览器缓存，或本地开发服务器（npm run serve）还在运行并占着端口，导致你以为访问的是 XAMPP，其实连的是热更新服务。
