如何在Netlify上实现原生JS项目的直接URL访问

方案1：用_redirects文件实现 #

• 在项目根目录新建一个无后缀的_redirects文件
• 写入以下规则：

  /*    /index.html   200
  

  这条规则会把所有访问请求转发到index.html，让你的前端路由接管处理——不管用户直接输入哪个路由地址，服务器都会先返回主入口文件，再由你的原生JS路由匹配pages目录下对应的html文件。

方案2：用_netlify.toml配置 #

• 在项目根目录创建_netlify.toml文件
• 写入以下配置：

  [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200
  

  效果和_redirects文件完全一致，只是采用Netlify支持的toml格式配置重写规则。

额外注意事项 #

• 确保你的原生JS路由逻辑能正确识别URL路径，通过动态加载（比如fetch获取html内容后替换DOM、或用iframe嵌入）的方式加载pages下的对应文件
• 如果有静态资源（如css、js、图片）不需要被重定向，可以在规则中先排除：

  /assets/*    /assets/:splat    200
  /*    /index.html   200
  

  这样/assets目录下的资源会直接返回，不会被转发到index.html。

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