背景

本人在部署vue项目（与Java前后端分离项目）的时候，一般打包结束后，会生成到dist文件夹下，然后在配置了域名解析后，会使用nginx直接指向目录，最后使用域名就可以直接访问，如admin.example.com。但这样做有一定的风险，一般会将后台登录地址给隐藏掉。可以在上述域名后添加一个二级目录进行登录。

修改路由配置

const ROUTE_BASE_URL = process.env.NODE_ENV === 'production'?'/RYmlOkmZ':'/'
export default new Router({
  base: ROUTE_BASE_URL, # 这里的ROUTE_BASE_URL 是定义过的
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

修改打包配置

const ROUTE_BASE_URL = process.env.NODE_ENV === 'production'?'/RYmlOkmZ':'/'
module.exports = {
  publicPath: ROUTE_BASE_URL，//注意修改这个路径，和上边对应上
  outputDir: 'RYmlOkmZ', // 这个是打包后的文件输出目录
  }

修改nginx配置

listen 80;
    server_name admin.xcoolu.com;
    index index.html;
    root /www/wwwroot/; #注意这里不要写文件路径

如果页面刷新出现404的话，添加如下配置

    # 避免访问出现 404 错误
    location / {
      try_files $uri $uri/ @router;
      index  index.html;
    }
    location @router {
      rewrite ^.*$ /index.html last;
    }  

最后，使用 admin.example.com/RYmlOkmZ 进行访问