Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
614 views
in Technique[技术] by (71.8m points)

antd pro4配置开发、生产环境

基本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": ""
      }
    }
  }
};

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...