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

Question

问题描述

基于vue-cli 2.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 {
        listen       9009;
        server_name  localhost;
        
        #字符集
        charset utf-8;

        location / {
            root D:/本机软件/TortoiseSVN/repository/iop/iop-view/dist;
            index main.html;
            try_files $uri $uri/ /main.html;
        }

        location ^~ /login/ {
            proxy_pass http://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方式

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

第二，因为地址栏的url势必先通过后端解析，如果后端不认识url，就会报错返回404，所以后端需要配置一下兼容错误，指向 某个特定页面，比如首页的设定。

nginx方式

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

node/express
推荐使用 connect-history-api-fallback 中间件

Answer 3

楼上答的应该没问题，如果使用正常不能刷新的话，多半是路径错了，你可以看一下 error_log 做判断。

Answer 4

也可以考虑用 nuxt 吧，能力还更多

Answer 5

请问题主问题解决了吗？我也遇到同样的问题，应该是路径的问题，但是不知道应该是哪里的路径有问题