在使用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

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/607