多页面多路由进入子路由页面直接刷新出错

[mosker]

http://localhost:8080/list 运行路由到这个页面，正常显示。但我直接这个地址刷新就提示 Cannot GET /list。 是不是多页面多路由进入子路由页面直接刷新不能获取到。有解决办法吗

[Deguang]

这个问题是需要做 http server 配置 看这个文档http://router.vuejs.org/zh-cn/essentials/history-mode.html

[suweiteng]

@Deguang 你这种配置只是单一路由，不能解答题主的疑问。文章指出了把URL配比不到资源时，指向全部依赖的index.html。题主是多路由，不同路由依赖不同的页面。

[Deguang]

@reg21st 嗯，之前的回答不够完整，在 dev 模式下可以使用 connect-history-api-fallback ，来解决刷新 404 的问题， dev-server.js 中设置

 // handle fallback for HTML5 history API
  var history = require('connect-history-api-fallback')
         app.use(history({
                index: '/index.html',
                rewrites: [
                      { from: /^\/indx\/.*$/, to: '/index.html'}, // 默认入口
                      { from: /^\/index2\/.*$/, to: '/index2.html'}, // 其他入口
                ]
        }）
  )`

[suweiteng]

@Deguang 那么生产环境呢？依旧是多路由啊

[Deguang]

@reg21st 生产环境 参考 上述 router 文档，配置多 try_files，下面以 nginx 为例：

location ~ ^/(index) {
     try_files $uri $uri/ /index.html;
}
location ~ ^/(anotherIndex) {
     try_files $uri $uri/ /anotherIndex.html;
}

这边有项目 使用 多入口 的spa 模式在线上部署，有问题可以交流 : )

[suweiteng]

@Deguang 谢谢~多多交流。我们前些日子也部署了这种项目，单个的SPA，也是用nginx。这种方式理解，只是感觉这种配置方式相对来说，需要在服务器配置多条，试图寻求更便捷的方式。

[Deguang]

@reg21st 嗯，确实需要在线上服务器增加非常多条目的配置项，比较冗余，sa 在调研新的 proxy 配置方案，有眉目了可以互通下

[suweiteng]

@Deguang
对于公共资源 你们是如何处理的？都打包成一个单独文件吗？ 方便的情况下，可以分享下你们的构建，我倒腾了很久，始终没有成熟方案。

[Deguang]

@reg21st 优化还没开始全面做，几个思路吧，公共资源 dll 打包抽离，过大的静态资源剥离，组件 异步加载，大的资源包分片。 整体就是 权衡请求数和资源包的尺寸上找平衡

[zhenwoo]

@Deguang 通过nginx能指定跳转到当前页面吗？要是刷新跳转不到当前页面确实是很尴尬的一件事，老板肯定不干呢

[zhenwoo]

@Deguang hash模式可以的，但是url太丑了，没法目视

[Deguang]

@zhenwoo 对，Nginx，做try_files

[piter902]

怎么配置多页面，多路由，就是多页面就的url是以.html结尾的，现在有需求是/xx.html/a这种怎么配置