如何在一键PHP环境上部署Vue项目_Vue项目前后端分离

首先将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免费学习笔记（深入）”；

笔目鱼英文论文写作器

写高质量英文论文，就用笔目鱼

87

查看详情

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服务器能访问的路径，并处理好路由和接口调用，就能顺利运行。前后端分离的核心是“静态前端 + 接口后端”，即使共用一台服务器，逻辑也是独立的。

以上就是如何在一键PHP环境上部署Vue项目_Vue项目前后端分离的详细内容，更多请关注php中文网其它相关文章！