nginx配置若依框架二级路径,页面退出出现404问题

nginx配置 

location /gongdan {
   alias html/gongdan;
   try_files $uri $uri/ @router;
   index index.html;
}
location @router {
   rewrite ^/(gongdan)/(.+)$ /$1/index.html last;
}
location /gongdan-api {
   proxy_pass /*后端地址*/;
}

若依vue配置

vue.config.js

  publicPath: process.env.NODE_ENV === "production" ? "/gongdan/" : "/",

 src/layout/components/Navbar.vue

找到下面这几行代码修改为

 async logout() {
      this.$confirm("确定注销并退出系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            // location.href = "/index";
            // 若依nginx 配置二级路径存在 location 404的问题
            this.$router.push(`/login?redirect=${this.$route.fullPath}`);
          });
        })
        .catch(() => {});
    },

src/utils/request.js

    if (code === 401) {
      if (!isRelogin.show) {
        isRelogin.show = true;
        MessageBox.confirm(
          "登录状态已过期,您可以继续留在该页面,或者重新登录",
          "系统提示",
          {
            confirmButtonText: "重新登录",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            isRelogin.show = false;
            store.dispatch("LogOut").then(() => {
              // 若依nginx 配置二级路径存在 location 404的问题
              // location.href = "/index";
              location.href = "/gongdan/index";
            });
          })
          .catch(() => {
            isRelogin.show = false;
          });
      }

 这个location.href 和vue-router 可能会出现冲突,配置二级路径的时候应该要注意。

 

你可能感兴趣的:(nginx,vue.js,前端)