Vue 3 SPA部署到Plesk服务器刷新路由出现404错误该如何解决？

第一步：确认Plesk站点Apache配置是否开启.htaccess支持 #

• 登录Plesk面板，进入对应站点的「主机设置」页面
• 找到「Web脚本和统计」板块，确认勾选了Apache的.htaccess支持选项，保存后重启Apache服务
• 若使用的是Nginx+Apache混合模式，需要额外在Nginx配置里加 fallback 规则，Plesk默认Nginx会优先处理静态资源请求，不会把非静态请求转发给Apache处理，.htaccess规则自然不会生效

第二步：验证.htaccess规则有效性 #

• 先测试.htaccess是否被读取：在.htaccess里加一行故意写错的规则比如InvalidRuleTest 1，刷新站点如果返回500错误，说明.htaccess是生效的，如果没返回500就还是第一步的配置问题
• 如果确认.htaccess生效，修正后替换为以下适配Plesk的规则，注意如果你的Vue应用不是部署在根目录，要把RewriteBase改成对应的子目录路径：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

第三步：Nginx模式的单独配置（如果站点关闭了Apache只用Nginx） #

• 进入Plesk对应站点的「Apache & Nginx 设置」页面
• 拉到最下方的「附加Nginx指令」输入框，添加如下规则：

location / {
  try_files $uri $uri/ /index.html;
}

• 如果部署在子目录，比如/app路径下，规则改为：

location /app {
  try_files $uri $uri/ /app/index.html;
}

• 保存配置后重载Nginx服务即可生效

第四步：额外排查项 #

• 确认Vue Router的base参数配置和部署路径一致，比如部署在子目录/app时，createWebHistory要传入'/app'作为base参数
• 确认打包后的dist目录所有文件都正确上传到了Plesk站点的根目录，index.html存在且权限为644，文件夹权限为755
• 清空浏览器缓存和Plesk的站点缓存后再测试刷新效果

内容的提问来源于stack exchange，提问作者sai kumar