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

xampp 可部署 vue 项目，但必须先执行 npm run build 生成 dist 静态文件，再复制到 htdocs 子目录（如 /my-vue-app/），并配置 apache 重写规则与 router base 以支持 history 模式，不可直接部署源码或依赖 vue-cli-service serve。

xampp环境部署vue项目 xampp配置apache静态资源

直接说结论：XAMPP 可以部署 Vue 项目，但必须用 npm run build 生成静态文件后丢进 /opt/lampp/htdocs/（Linux）或 C:\xampp\htdocs\（Windows），不能直接扔源码目录，也不能靠 vue-cli-service serve 启动。

Vue 项目必须先 build 成静态资源才能放 XAMPP

Vue CLI 开发时用的 vue-cli-service serve 是基于 webpack-dev-server 的热更新服务，和 Apache 完全无关。XAMPP 的 Apache 只认纯 HTML/CSS/JS 文件，不解析 .vue、不运行 Node.js、不读 vue.config.js。

执行 npm run build（或 yarn build）后，输出默认在 dist/ 目录
把整个 dist/ 里的文件复制到 /opt/lampp/htdocs/my-vue-app/（Linux）或 C:\xampp\htdocs\my-vue-app\（Windows）
浏览器访问 http://localhost/my-vue-app/ 即可 —— 注意结尾有斜杠，否则可能报 404
如果项目用了 Vue Router 的 history 模式，会遇到刷新 404，见下一条

Vue Router history 模式需配置 Apache 重写规则

默认 vue-router 在 mode: 'history' 下会去掉 URL 中的 #，比如 /user/123。但 Apache 不知道这些路径对应的是 index.html，直接返回 404。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

编辑 /opt/lampp/etc/httpd.conf（Linux）或 C:\xampp\apache\conf\httpd.conf（Windows）
确认已启用 rewrite 模块：取消注释 LoadModule rewrite_module modules/mod_rewrite.so
找到你部署项目的 <directory></directory> 块（例如 <directory></directory>）
把里面的 AllowOverride None 改成 AllowOverride All
在项目根目录（即 my-vue-app/）下新建 .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 的值必须和实际 URL 路径一致（比如你访问的是 /my-vue-app/，就不能写成 / 或 /app/）。

跨域、HTTPS、中文乱码等常见问题处理

开发阶段前端调 API 经常跨域，而 XAMPP 本身不代理请求；另外证书、编码等问题也容易卡住。

跨域不是 Apache 该管的事 —— vue.config.js 里的 devServer.proxy 只在 serve 阶段生效，build 后失效。上线必须让后端加 Access-Control-Allow-Origin，或用 Nginx 反向代理（XAMPP 不推荐干这个）
HTTPS 需改 /opt/lampp/etc/extra/httpd-ssl.conf，重点配好 SSLCertificateFile、SSLCertificateKeyFile 和 VirtualHost *:443 的 DocumentRoot，别漏掉重启：sudo /opt/lampp/lampp restartapache
目录列表中文名乱码？在 httpd.conf 里加 IndexOptions Charset=UTF-8；页面内中文乱码？确保 index.html 有 <meta charset="UTF-8">

最易被忽略的一点：XAMPP 默认不允许外网访问（只监听 127.0.0.1）。如果想用手机扫码访问本地 Vue 页面，得改 httpd.conf 里 <directory></directory> 块中的 Require local 为 Require all granted，并确认防火墙放行对应端口 —— 这个权限放开后，别长期开着，尤其连公网时。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！