Nginx部署本地Vite应用时.vite目录返回403权限禁止求助

问题根源 #

Nginx默认会拦截访问以.开头的隐藏目录（比如.git、.env这类），而Vite热模块替换（HMR）所需的文件正好存在node_modules/.vite这个隐藏目录里，所以请求被Nginx的规则挡了，返回403错误。

解决步骤 #

修改Nginx站点配置，放开对node_modules/.vite目录的访问权限：

1. 找到对应站点的配置文件，一般在/etc/nginx/sites-available/或/etc/nginx/conf.d/目录下
2. 在配置的server块里添加专门的location规则，示例如下：

server {
    listen 443 ssl;
    server_name dev.localhost;

    # 其他原有配置...

    # 允许访问Vite的HMR依赖目录
    location ^~ /my-project-name/node_modules/.vite/ {
        allow all;
        root /实际的项目根目录路径;
        try_files $uri $uri/ =404;
    }

    # 原有静态资源处理规则
    location /my-project-name/ {
        root /实际的项目根目录路径;
        try_files $uri $uri/ /index.html;
    }
}

3. 检查配置语法是否正确：

nginx -t

4. 重启Nginx让配置生效：

systemctl restart nginx

额外注意事项 #

• 把配置里的/实际的项目根目录路径替换成你本地项目的真实路径
• 确保node_modules/.vite目录的权限正确，让Nginx进程（通常是www-data用户）能读取：

chmod -R 755 /实际的项目根目录路径/node_modules/.vite

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