XAMPP部署Vue项目教程

XAMPP 完全可以部署 Vue 项目，但关键在于必须先通过 `npm run build` 将项目构建为静态资源（输出至 `dist/` 目录），再将其中所有文件复制到 XAMPP 的 `htdocs` 对应子目录下（如 `C:\xampp\htdocs\my-vue-app\` 或 `/opt/lampp/htdocs/my-vue-app/`），**绝不能直接放置源码或依赖 `vue-cli-service serve` 启动**——因为 Apache 仅服务纯 HTML/CSS/JS，不解析 `.vue` 文件、不运行 Node.js、也不读取 `vue.config.js`；若使用 Vue Router 的 history 模式，还需启用 Apache 的 `mod_rewrite` 模块、配置 `AllowOverride All`，并在项目根目录添加适配路径的 `.htaccess` 重写规则，否则刷新页面会 404；此外，跨域需后端配合或反向代理（XAMPP 不适合做开发代理）、HTTPS 要手动配置 SSL 证书、中文乱码需补全 UTF-8 编码声明，而想让手机等外网设备访问则必须修改 Apache 监听权限并谨慎开放防火墙——每一步都踩准，你的 Vue 应用才能在 XAMPP 上真正稳稳跑起来。

直接说结论：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。

• 编辑 /opt/lampp/etc/httpd.conf（Linux）或 C:\xampp\apache\conf\httpd.conf（Windows）
• 确认已启用 rewrite 模块：取消注释 LoadModule rewrite_module modules/mod_rewrite.so
• 找到你部署项目的 块（例如 ）
• 把里面的 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 有

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~