如何将所有路由转发至/public/app/index.html实现前端路由？

这种配置逻辑是单页应用（SPA）实现前端路由的核心手段，本质是让后端把所有非静态资源的请求都转发到你的入口文件/public/app/index.html，由前端路由框架（比如React Router、Vue Router等）接管后续的路径解析和页面渲染，完美解决SPA刷新页面或直接访问子路由时出现404的问题。

需要注意几个关键细节：

• 优先处理静态资源：后端配置时要先确保/public/app/下的JS、CSS、图片等静态文件能正常返回，再对剩下的所有路径执行通配转发。比如用Express的话，顺序不能搞反：

  // 先挂载静态资源中间件
  app.use('/public/app', express.static(path.join(__dirname, 'public/app')));
  // 再配置通配路由转发到index.html
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/app/index.html'));
  });
  

• 前端公共路径配置：打包前端应用时，要把publicPath设置为/public/app/，避免静态资源加载路径错误导致404。
• 不同后端的适配写法：
  • Nginx可以用try_files指令实现：

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

  • Rails的话，你的思路完全对，可直接在routes.rb中配置：

    get '*path', to: proc { |env| 
      [200, {}, [File.read(Rails.root.join('public/app/index.html'))]] 
    }
    

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