使用Vanilla JS+Webpack构建SPA时路由路径不存在报错求助

• 确认前端路由模式配置

  • 若用history模式（无#的URL），刷新或直接访问路由路径时，服务器会尝试查找对应物理文件，必然返回404。需在webpack.config.js中配置devServer的historyApiFallback：

    module.exports = {
      // ...其他配置项
      devServer: {
        historyApiFallback: true, // 所有404请求自动重定向到index.html
      },
    };
    

  • 若用hash模式，检查路由链接是否正确添加#前缀，比如<a href="#/hotel">酒店页</a>，同时确保路由配置里开启hash模式（比如Vue Router设mode: 'hash'，React Router用HashRouter）。

• 验证路由路径匹配规则

  • 核对路由配置的path与链接的href是否完全一致，比如路由配置是path: '/hotel'，history模式下链接应为<a href="/hotel">，hash模式下是<a href="#/hotel">，避免拼写错误或多余斜杠。
  • 嵌套路由需检查子路由路径是否正确继承父路由前缀，或使用了正确的相对路径。

• 检查Webpack publicPath配置

  • 若webpack.config.js中设置了publicPath，确保路由根路径与publicPath匹配。比如publicPath设为'/app/'，路由链接需改为<a href="/app/hotel">，同时historyApiFallback要对应配置：

    devServer: {
      historyApiFallback: {
        index: '/app/' // 与publicPath保持一致
      },
      publicPath: '/app/'
    }
    

• 生产环境服务器配置

  • 生产打包后部署出现问题时，需在后端服务器配置重定向规则，将所有请求指向index.html：
    • Nginx配置示例：

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

    • Apache可在.htaccess中添加：

      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.html [L]
      

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