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": ""
}
}
}
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
url之类的是什么意思 是请求的url么?