XAMPP环境部署Vue项目 XAMPP配置Apache静态托管-php教程-PHP中文网

vue项目需先执行npm run build生成dist静态文件，再将其整体复制至apache可服务路径（如htdocs/my-vue-app/），并配置publicpath、vue-router base、启用mod_rewrite、设置allowoverride all及正确.htaccess重写规则，否则history模式下刷新将404。

xampp环境部署vue项目 xampp配置apache静态托管

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></directory> 块，在其内部把 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/），不可省略或写错。