antd pro4配置开发、生产环境

发布于 2022-09-12 04:20:22 字数 5376 浏览 13 评论 0

基本antd pro4开发的管理系统,领导说需要把url之类的写成配置文件,不是在项目里直接写死,这样不需要在打包或者其它时候每次改地址之类的。但是看了下资料,不太了解nodeEnv或者process.env这些东西。不知道该怎么根据不同的环境去配置
并且我按照现在的做法,部署到nginx之后,控制台出现了404
request.js

// * 配置request请求时的默认参数

const request = extend({
  errorHandler,
  //credentials: 'include', // *  默认请求是否带上cookie
  prefix: '/api',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
});

// * 请求拦截
let isPending = false;
request.interceptors.request.use(async (url, options) => {
  let token = localStorage.getItem('token');
  if(token) {
    token && (options.headers['token'] = token)
    if(url === '/api/refreshToken') {
      options.headers['token'] = localStorage.getItem('refreshToken')
      return { url, options };
    }
    let timestamp = new Date().getTime()
    let tokenPeriodTime = Number(localStorage.getItem('tokenPeriodTime'))
    if(timestamp >= tokenPeriodTime) {// * token过期,刷新token
      if(isPending) {
       
      }else {
        isPending = true;
        request('/refreshToken').then( res => {
          if(res.status === 200) {
            const { token, refreshToken, tokenPeriodTime } = res.data
            localStorage.setItem('token', token); 
            localStorage.setItem('refreshToken', refreshToken)
            localStorage.setItem('tokenPeriodTime', tokenPeriodTime)
          }
          if(res.status === 403 || res.status === 401) {
            window.location.href = '/user/login'
          }
        })
      }
    }
  }
  return {
    url,
    options
  }
})

export default request;

config/config.js

import defaultSettings from "./defaultSettings"; // https://umijs.org/config/

import slash from "slash2";
import themePluginConfig from "./themePluginConfig";
const { pwa } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量,请不要在你的项目中使用它。

const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;
const isAntDesignProPreview =
  ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === "site";
const plugins = [
  [
    "umi-plugin-react",
    {
      antd: true,
      dva: {
        hmr: true
      },
      locale: {
        // default false
        enable: true,
        // default zh-CN
        default: "zh-CN",
        // default true, when it is true, will use `navigator.language` overwrite default
        baseNavigator: true
      },
      dynamicImport: {
        loadingComponent: "./components/PageLoading/index",
        webpackChunkName: true,
        level: 3
      },
      pwa: pwa
        ? {
            workboxPluginMode: "InjectManifest",
            workboxOptions: {
              importWorkboxFrom: "local"
            }
          }
        : false // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665
      // dll features https://webpack.js.org/plugins/dll-plugin/
      // dll: {
      //   include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
      //   exclude: ['@babel/runtime', 'netlify-lambda'],
      // },
    }
  ],
  [
    "umi-plugin-pro-block",
    {
      moveMock: false,
      moveService: false,
      modifyRequest: true,
      autoAddMenu: true
    }
  ]
];

if (isAntDesignProPreview) {
  // 针对 preview.pro.ant.design 的 GA 统计代码
  plugins.push([
    "umi-plugin-ga",
    {
      code: "UA-72788897-6"
    }
  ]);
  plugins.push(["umi-plugin-antd-theme", themePluginConfig]);
}

export default {
  plugins,
  hash: true,
  targets: {
    ie: 11
  },
  // umi routes: https://umijs.org/zh/guide/router.html
  routes: [
    {
      path: "/user",
      component: "../layouts/UserLayout",
      routes: [
        {
          name: "login",
          path: "/user/login",
          component: "./User"
        }
      ]
    },
         ...
        {
          component: "./404"
        }
      ]
    },
    {
      component: "./404"
    }
  ],
  // Theme for antd: https://ant.design/docs/react/customize-theme-cn
  theme: {
    // ...darkTheme,
  },
  define: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION:
      ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION || "" // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量,请不要在你的项目中使用它。
  },
  ignoreMomentLocale: true,
  lessLoaderOptions: {
    javascriptEnabled: true
  },
  disableRedirectHoist: true,
  cssLoaderOptions: {
    modules: true,
    getLocalIdent: (context, _, localName) => {
      if (
        context.resourcePath.includes("node_modules") ||
        context.resourcePath.includes("ant.design.pro.less") ||
        context.resourcePath.includes("global.less")
      ) {
        return localName;
      }

      const match = context.resourcePath.match(/src(.*)/);

      if (match && match[1]) {
        const antdProPath = match[1].replace(".less", "");
        const arr = slash(antdProPath)
          .split("/")
          .map(a => a.replace(/([A-Z])/g, "-$1"))
          .map(a => a.toLowerCase());
        return `antd-pro${arr.join("-")}-${localName}`.replace(/--/g, "-");
      }

      return localName;
    }
  },
  manifest: {
    basePath: "/"
  }, // chainWebpack: webpackPlugin,
  proxy: {
    "/api": {
      target: "http://localhost:8112/",
      changeOrigin: true,
      pathRewrite: {
        "^/api/ap": ""
      }
    }
  }
};

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

零崎曲识 2022-09-19 04:20:22

url之类的是什么意思 是请求的url么?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文