Yew SPA部署Nginx后直接访问URL返回404的问题及生产部署方案咨询

嘿，我完全懂你遇到的这个头疼问题——这其实是SPA（单页应用）部署时非常常见的前端路由陷阱！

为什么会出现404？ #

当你点击页面内的链接时，Yew的BrowserRouter是在浏览器端处理路由的，不会向Nginx服务器发送新的请求，所以URL能正常变化，页面也能正确渲染。但当你直接在地址栏输入/history或者刷新页面时，浏览器会向Nginx发送一个请求，要求获取/history这个路径对应的文件，但你的服务器上根本没有这个物理文件（只有index.html和相关的wasm/js资源），所以Nginx就返回了404错误，连你的自定义404路由都触发不了——因为服务器根本没把请求传到前端路由那里。

解决Nginx配置问题（核心方案） #

你只需要修改Nginx的站点配置，让所有请求都指向你的SPA入口文件index.html，这样前端路由就能接管所有路径的处理了。给你一个配置示例：

server {
    listen 443 ssl;
    server_name example.com;

    # 替换成你的SSL证书路径
    ssl_certificate /path/to/your/ssl/cert.pem;
    ssl_certificate_key /path/to/your/ssl/key.pem;

    # 指向Trunk编译生成的静态文件目录
    root /var/www/your-yew-app/dist;
    index index.html;

    # 关键配置：让Nginx找不到对应文件时返回index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选但推荐：正确设置wasm文件的MIME类型，避免加载异常
    location ~* \.wasm$ {
        default_type application/wasm;
        add_header Cache-Control "public, max-age=31536000";
    }
}

这个配置里的try_files指令会先尝试加载请求的静态文件（比如css、js、wasm），如果找不到对应的文件或目录，就返回index.html，这样Yew的前端路由就能正确解析/history、/404这些路径，你的自定义404组件也能正常显示了。

关于生产部署方案的疑问 #

你提到的“用Nginx反向代理Trunk服务器”其实不是生产环境的最优选择——Trunk本质上是一个开发工具，它的性能和稳定性并不适合直接用于生产部署。更标准的生产方案是：

1. 用Trunk编译生产版本：运行trunk build --release，这会在项目根目录的dist文件夹生成所有静态资源（index.html、编译后的wasm文件、辅助js文件等）。
2. 托管静态文件：把dist目录里的所有内容上传到Nginx的静态文件目录（比如上面配置里的/var/www/your-yew-app/dist）。
3. 配置Nginx：用上面的Nginx配置，直接托管静态文件并配置HTTPS——Nginx本身就支持SSL证书配置，完全不需要依赖Trunk来提供HTTPS服务。

这样部署的好处是性能更高（Nginx是专门的静态文件服务器）、更稳定，也更容易维护和扩展。

另外补充一句：你的Yew路由代码是完全没问题的，问题确实出在服务器端的配置上，只要调整Nginx的规则让前端路由能接管所有路径，就能解决所有404的问题啦！

备注：内容来源于stack exchange，提问作者djmcmath