Vue项目在phpEnv中刷新404是因为Nginx未配置SPA兜底，需在server块location/中添加try_files $uri $uri/ /index.html;并确保root指向dist目录、重启Nginx生效。
phpEnv 可以直接部署 Vue 项目，但必须改 Nginx 配置，否则刷新页面 404 —— 这是绝大多数人卡住的第一步。
为什么 Vue 项目在 phpEnv 里一刷新就 404
Vue Router 默认用 history 模式，URL 看起来像 /user/profile，但实际没有对应物理文件。Nginx 默认只找真实路径，找不到就返回 404。
phpEnv 自带的 Nginx 不会自动 fallback 到 index.html，必须手动加 try_files 规则。
- 错误现象：
http://localhost/user/profile直接访问正常，F5 刷新变 404 - 根本原因：Nginx 没配置单页应用（SPA）路由兜底
- 关键配置项：
try_files $uri $uri/ /index.html;，不是/index.php
修改 phpEnv 的 nginx.conf 部署 Vue 项目
找到 phpEnv 的 Nginx 配置文件路径：phpEnv\Extensions\Nginx1.15.11\conf\nginx.conf（版本号可能略有不同）
在 server 块里定位到 location / 区域，替换或补全为：
location / {
root D:/phpEnv/www/my-vue-project;
index index.html;
try_files $uri $uri/ /index.html;
}
-
root必须指向你 Vue 打包后的dist目录完整路径（不是项目源码目录） - 不要漏掉分号，
try_files最后一项必须是/index.html，不能写成index.html或./index.html - 改完保存，回到 phpEnv 界面点击「重启 Nginx」，不是「启动」——已运行状态下的修改必须重启才生效
多套 Vue 项目共存怎么配
phpEnv 不支持图形化添加多个站点，只能靠手动配多个 server 块，靠 listen 端口或 server_name 区分。
例如部署两个 Vue 项目，推荐用不同端口（避免域名解析麻烦）：
server {
listen 8081;
server_name localhost;
root D:/phpEnv/www/project-a/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
server {
listen 8082;
server_name localhost;
root D:/phpEnv/www/project-b/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
- 每个
server块必须有唯一listen，且端口不被占用（检查任务管理器或用netstat -ano | findstr :8081） -
root路径末尾不要加/dist以外的斜杠，比如D:/phpEnv/www/project-a/dist/是错的 - 浏览器访问时必须带端口：
http://localhost:8081，否则默认走 80，进的是第一个 server
打包时要注意 publicPath 和 base 配置
如果你把 Vue 项目放在子目录（比如 http://localhost/vue-admin/），必须改 vue.config.js：
module.exports = {
publicPath: '/vue-admin/',
// 或 Vue 3 + Vite 项目用：
// base: '/vue-admin/'
}
- 不改的话，生成的 JS/CSS 路径是
/js/app.xxx.js，Nginx 会去根目录找，而实际文件在/vue-admin/下 -
publicPath值必须以/开头、以/结尾（如'/admin/'），否则资源 404 - 改完要重新
npm run build，旧 dist 文件不能复用
最常被忽略的一点：phpEnv 的 Nginx 配置改了之后，很多人只点了「启动」，没点「重启」；或者改了 nginx.conf 却没确认 phpEnv 界面右下角显示「Nginx 已运行」——它可能静默失败，得看日志：phpEnv\Extensions\Nginx1.15.11\logs\error.log。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
