侧边栏壁纸
博主头像
小鱼吃猫博客博主等级

你所热爱的,便是你的生活。

  • 累计撰写 114 篇文章
  • 累计创建 47 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

vuecli打包实现二级目录访问,进行登录入口隐藏

小鱼吃猫
2023-02-23 / 0 评论 / 0 点赞 / 269 阅读 / 1532 字

背景

本人在部署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 进行访问

0

评论区