nginx配置vue(history模式)

问题的原因：项目本来使用 hash 的路由模式来部署，因为需求关系，现在要改成 history 的模式来部署了（路径上不要有 # 号）
第一步：
修改项目的 router/index.js 的配置

const router = new VueRouter({
  mode: 'history',  // 将 hash 改成 history
  routes: [
    ...pages
  ]
})

修改 config/index.js assetsPublicPath

assetsPublicPath: './', // 把 / 改成 ./ 这样访问静态资源的时候使用相对路径，静态资源就不会报 404 了

第二步：
我现在是在本地测试，所以将打包出来的 dist 文件直接放在了 tomcat 的 root 目录下面，先让项目跑起来

tomcat 的 server.xml

修改了一下 port 和 host
然后启动 tomcat，在浏览器上面访问


可以看到直接访问到 index.html，并且静态资源什么的都正常访问了
但是访问项目的路由 localhost:8098/login 的时候页面直接就 404 了，因为 /login 直接被当作静态资源加载了，打包目录下当然是没有 login 这个文件
第三步：
这个时候就轮到 nginx 配置了
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
下面是我的 nginx 配置：

server {
        listen       8096;
        server_name  127.0.0.1;

		location / {
			proxy_pass http://localhost:8098/;
            index index.html;                        
            try_files $uri $uri/ /index.html;
        }
    }

可以看到我配置了一个代理，单访问 127.0.0.1:8096 的时候，会跳转到我的 tomcat 服务下面，try_files $uri $uri/ /index.html; 就是官网上面的配置。
启动 nginx，访问 127.0.0.1:8096

嗯？

仔细一看，明明访问的是 js，但是返回的是 index.html?
原因是访问这个 js 的时候 404 导致他被 nginx 转到了 index.html 上面了，所以明明是 js，但是解析的是一段 html，所以报了

Uncaught SyntaxError: Unexpected token '<'

为什么会 404 呢？直到我看到了这个 https://www.cnblogs.com/mmzuo-798/p/10871750.html

按照文中说法，我的项目是部署在 tomcat，使用 nginx 代理，所以 nginx 的本地资源是找不到我的项目的静态资源的！
于是试着把项目部署在 nginx，并把代理去掉了。

重启！搞定！

做一点补充：
有的页面在加载静态资源的时候报了 404

现在我在 nginx 上面的文件目录结构是这样子的

很明显少了一层 /xdxt/ 的目录，根据我页面的代码，判断是引入第三方文件的时候出了问题：

这个时候我们需要改一下我们的配置

server {
    listen       8096;
    server_name  127.0.0.1;
    location /static/mb-view/ {
        root html/xdxt;
        try_files $uri $uri/ /index.html;
    }
    location /xdxt/ {
        index index.html;
        try_files $uri $uri/xdxt/ /xdxt/index.html;
    }
}

结束啦，希望能帮到有需要的小伙伴。