基于vue脚手架的多页结构，如何才能支持vue-router的history模式？

Question

问题描述基于vue-cli2.x.x通过修改webpack配置实现多页结构（如何配置网上很多博客说明，如有需要我再贴出来），但目前此结构的各个单页只能使用vue-router默认的hash模式，无法使用history模式。问题补充1如果无法通过写改webpack/vue-loader等配置实现（development&product），也可以提出通过nginx配置代理转发或其他方式（product）。nginx代理方式目前遇到的问题是：如果使用history模式，访问url虽然正常但不能进行刷新操作（try_files有添加）。问题补充2多页模式+开发时（history模式将无法访问路由）http://localhost:8011/main.html#/admin/customer/detail?test=101039多页模式+生产时（通过nginx可实现，history模式刷新会404）http://localhost:8011/#/admin/customer/detail?test=101039或者http://localhost:8011/mian/#/admin/customer/detail?test=101039单页模式+开发时/生产时+history(期望的url结构)http://localhost:8011/admin/customer/detail?test=101039问题补充3nginx生效配置server{listen9009;server_namelocalhost;#字符集charsetutf-8;location/{rootD:/本机软件/TortoiseSVN/repository/iop/iop-view/dist;indexmain.html;try_files$uri$uri//main.html;}location^~/login/{proxy_passhttp://127.0.0.1:9009/login.html;}}

Answer 1

我对于这个问题的看法是这样的，既然是多页，即路由是服务端提供的，为什么还要用vue-router来搞spa这一套东西，直接走ssr（比如nuxt）这一套不是更好？
如果指的是服务端伺服多个html文件，然后每个html文件各自对应一个spa的方式（即所谓的多页），这么做其实等价于多个spa而已，如果用nginx做代理的话，挨个针对不同的路径写匹配规则不就可以了吗？比如：
location^~/page1{
try_files$uri$uri//index.html;
}
location^~/page2{
try_files$uri$uri//index.html;
}
这本质上还是spa咯，只不过从单个数量变成了多个，我之前做过的一个angularjs+django的老项目大概就这个套路。
个人拙见，如有错误，还望轻喷。如果题主找到答案的话，也可以分享一下。
                            

Answer 2

使用history模式很简单，官网有文档，需要前后端配合使用：
第一，前端配置mode方式
constrouter=newVueRouter({
mode:'history',
routes:[...]
})
第二，因为地址栏的url势必先通过后端解析，如果后端不认识url，就会报错返回404，所以后端需要配置一下兼容错误，指向某个特定页面，比如首页的设定。
nginx方式
location/{
try_files$uri$uri//index.html;
}
node/express推荐使用connect-history-api-fallback中间件