vue路由history模式_如何去除vue项目中的#

时间: 2018-04-09阅读: 2116标签: 路由

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在'#'的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式,例如:

const router = new VueRouter({
  mode: 'history',
})


对于VUE的router[mode: history]模式在开发的时候,一般都不出问题。是因为开发时用的服务器为node,Dev环境中自然已配置好了。但对于放到nginx下运行的时候,自然还会有其他注意的地方。总结如下:

在nginx里配置了以下配置后, 可能首页没有问题,链接也没有问题,但在点击刷新后,页面就无法显示了(404)

location /{
        root   /data/nginx/html;
        index  index.html index.htm;
}


为了解决404,需要通过以下两种方式:
方式一

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        error_page 404 /index.html;
    }

方式二

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }

方式三或者使用官方try_files 来指定index.html

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


此外,如果VUE应用没有发布在域名的目录根下,比如[http://xxx.com/wx/]。那么除了上述配置:

    location /wx{
        root   /data/nginx/html;
        index  index.html index.htm;
        #error_page 404 /wx/index.html;
        if (!-e $request_filename) {
            rewrite ^/(.*) /wx/index.html last;
            break;
        }
    }

还应该在VUE项目里把每个路径加上[/wx]这一段(或者指定base: '/wx/'),要不页面会显示为空白。


来源:https://segmentfault.com/a/1190000010151973

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯