Vue路由为history模式的nginx配置

场景

vue项目中，路由使用history模式。当访问项目的时候，是可以正常访问的，但是当我们刷新页面或者直接访问路径的时候就会返回404。

原因分析

在history模式下，通过监听 popstate 事件驱动界面变化，监听 a 链接点击事件用history.pushState、history.replaceState 方法改变 url来实现更新页面部分内容的操作，并没有发起http请求。但是当直接刷新页面或者直接访问路径的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。

解决方案

官方配置说明

nginx配置如下：

    server {
        listen 8082;
        location / {
          root /opt/dist/vue-history;
          index index.html index.html;
          try_files $uri $uri/ /index.html;
        }
    }

拓展

部署后，当访问一些页面的时候，报错 Uncaught SyntaxError: Unexpected token ‘＜’。

解决方案：

刚开始publicPath是’./’，需要改成’/’，即在vue.config.js中修改配置

module.exports = {
  ...
  publicPath: '/',
}

总结

以上是vue中路由使用history模式部署遇到的一些问题，希望这篇文章对你有所帮助！