Vite项目部署Nginx后刷新页面报错：如何解决模块脚本加载失败？

在Vite项目中，部署到Nginx后刷新页面报错，通常是由于Nginx配置不当导致的。Vite项目在开发和生产环境中使用了不同的路由模式，生产环境中默认使用的是history模式，而Nginx默认配置可能无法正确处理这种模式的路由。

问题分析

当你在Vite项目中使用history模式的路由时，刷新页面或直接访问某个子路由时，Nginx会尝试去查找对应的文件或目录。由于这些路径在服务器上并不存在，Nginx会返回404错误。

解决方案

要解决这个问题，你需要修改Nginx的配置文件，使得所有请求都指向index.html，然后由前端路由来处理这些路径。

1. 修改Nginx配置文件

找到你的Nginx配置文件（通常位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/default），并添加或修改以下内容：

server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名或IP地址

    root /path/to/your/vite/project/dist;  # 替换为你的Vite项目构建后的dist目录路径

    index index.html;

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

    # 其他配置...
}

2. 解释配置

• root /path/to/your/vite/project/dist;：指定Vite项目构建后的dist目录为根目录。
• try_files $uri $uri/ /index.html;：尝试按顺序查找文件，如果找不到则返回index.html，由前端路由处理。

3. 重启Nginx

修改完配置文件后，重启Nginx以使配置生效：

sudo systemctl restart nginx

其他注意事项

• 确保路径正确：确保root指令中的路径指向的是Vite项目构建后的dist目录。
• 缓存问题：如果你在部署后仍然遇到问题，可能是浏览器缓存了旧的资源。可以尝试清除浏览器缓存或使用无痕模式访问。
• SSL配置：如果你使用了HTTPS，确保Nginx配置中包含了SSL证书的配置。

总结

通过修改Nginx配置文件，使得所有请求都指向index.html，可以解决Vite项目部署后刷新页面报错的问题。这样，前端路由就可以正确处理所有的路径，而不会因为Nginx找不到对应的文件而返回404错误。