首先将Vue项目构建为静态文件并部署到PHP环境的Web目录，再配置服务器重写规则支持History路由模式，最后通过同域部署解决前后端接口跨域问题，实现分离架构下的协同运行。
在一键PHP环境上部署Vue项目，重点在于理解前后端分离架构的运行机制。前端Vue项目打包后本质是静态文件，不需要PHP环境来运行，但可以和PHP后端共存于同一服务器。下面介绍具体操作步骤和配置方法。
1. 准备Vue项目并打包
Vue项目开发完成后，需先构建生成静态资源：
- 进入Vue项目根目录，执行 npm run build（或 yarn build）
- 构建完成后，会在 dist 目录生成 index.html、js、css、img 等静态文件
- 这些文件就是前端部署所需内容
2. 将Vue静态文件放入PHP环境的Web目录
一键PHP环境（如phpStudy、XAMPP、宝塔等）都有默认的网站根目录：
- 例如 phpStudy 默认路径为 www 或 htdocs
- 将 Vue 打包后的 dist 文件夹内所有文件复制到你网站对应的目录下（如 www/vue-project）
- 确保 index.html 可通过浏览器访问，比如 http://localhost/vue-project
3. 配置Web服务器支持History模式（可选）
如果Vue使用了 history 路由模式，直接访问 /about 等路径会报404，需配置URL重写：
立即学习“PHP免费学习笔记（深入）”；
mallcloud商城
下载
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Nginx 配置示例：
location / {
try_files $uri $uri/ /index.html;
}
保存后重启Web服务即可生效。
4. 前后端接口对接处理
Vue项目通过axios等请求PHP接口，注意跨域问题：
- 开发阶段可用Vue CLI的 proxy 代理解决跨域
- 生产环境下建议将PHP接口和Vue部署在同一域名下，避免跨域
- 例如：前端 http://site.com，后端接口 http://site.com/api/user.php
- PHP接口正常编写，返回JSON格式数据即可
基本上就这些。只要把Vue构建成静态文件，放到PHP服务器能访问的路径，并处理好路由和接口调用，就能顺利运行。前后端分离的核心是“静态前端 + 接口后端”，即使共用一台服务器，逻辑也是独立的。
