vue router 模式histroy/hash 与 nginx配置二级目录

最新上线的一个后台管理系统，vue打包后部署到nginx指定的根目录下，使用正常，十分顺利。几天后，由于域名备案等需求，要求域名下的首页需要改成公司首页（首页是一个静态页面），将vue打包后的管理系统放到nginx二级目录下。结果将vue打包后的文件放置到二级目录下，直接访问不到

查找原因定位于vue项目中的路由配置：

export default new Router({
  base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
  /*
  mode:路由模式
  类型: string
  默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)
  可选值: "hash" | "history" | "abstract"
  配置路由模式:
  hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。显示 
  为：http://localhost:8080/#/about
  history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。显示为： 
  http://localhost:8080/about
  abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会 
  自动强制进入这个模式。 http://localhost:8080/
  */
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({y: 0}),
  routes: constantRoutes
})

第一种解决方案，将配置文件中 mode 值改成  hash，重新打包后放置到nginx二级目录下，就正常访问了，跳转、页面刷新都没问题。

问题已经解决，只是在访问地址url中会多出#字符。

现在尝试第二种解决方案，vue的路由模式还是history，将配置文件(.env.prod)中的VUE_APP_APP_NAME设为nginx的二级目录名：

# 二级部署路径
VUE_APP_APP_NAME ='adm'

vue重新打包部署到nginx二级目录下，页面可以正常访问，跳转也没问题，但刷新页面时，仍会出现500错误。

为什么会出现这种情况呢？因为刷新时时通过 nginx 去访问静态资源的，明显这个路径是找不到，因为这个只是前端路由。为了解决这个问题，我们需要当访问的是前端路由时，去访问 index.html 这个主入口，再由前端路由自己来访问到对应的页面。而 nginx 就会用到 try_files 这个指令。

加上try_files后的nginx配置：

    location / {
        #根目录位置
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /adm/index.html;
        #index 文件位置
        index  index.html index.htm;
    }

至此，两种方案下的部署都能正常运行，页面访问、跳转、刷新也都没有问题了。

总结：

通过这次部署遇到的问题，更加深一步了解vue项目路由配置模式，以及nginx配置中的try_files指令。