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

阎笑
  • 227

问题描述

基于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;
        }        
    }   
回复
阅读 2.8k
5 个回答
littleLyon
  • 7.8k
✓ 已被采纳

我对于这个问题的看法是这样的,既然是多页,即路由是服务端提供的,为什么还要用 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 的老项目大概就这个套路。

个人拙见,如有错误,还望轻喷。如果题主找到答案的话,也可以分享一下。

使用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 中间件

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

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

liuxk
  • 91

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

宣传栏