基于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
问题补充3
nginx生效配置
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中间件