Plesk部署Vite React应用后相对路径无法正常访问问题

问题场景 #

在Plesk环境下部署Vite构建的React应用后，访问主域名www.mywebsite.com可正常重定向到/login，但直接输入www.mywebsite.com/login、/users这类子路径时，页面会报错：

We're sorry, but something went wrong.

最初猜测需要配置.htaccess或web.config但不熟悉具体用法，最终通过添加.htaccess文件解决了问题。

解决方法 #

在Vite构建生成的dist文件夹中创建（或修改）.htaccess文件，写入以下内容：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

代码说明 #

• Options -MultiViews：关闭Apache的MultiViews功能，防止服务器自动尝试匹配文件内容而非路径
• RewriteEngine On：启用Apache的URL重写模块
• RewriteCond %{REQUEST_FILENAME} !-f：设置重写条件——仅当请求的路径不是服务器上真实存在的文件时，才执行后续重写规则
• RewriteRule ^ index.html [QSA,L]：将所有符合条件的请求转发到index.html，让React Router接管路由处理；QSA保留请求的查询参数，L表示这是最后一条执行的规则

内容的提问来源于stack exchange，提问作者Iván