使用antd pro框架后,我们需要考虑代码打包部署的问题。和简单的开发环境不同的是,生产环境中,项目代码可能会部署到不同的服务器上,那么,接口的api请求地址就可能需要尽可能的灵活配置。如何通过npm传入变量,实现antd pro项目的多环境部署呢?
查阅了大部分资料,我发现,大部分需求可能是区别dev、test、production环境的不同配置。但是我们项目的需求可能是同一套代码,生产环境需要部署到多个驻地。
首先想到的方式,是通过将ip和port作为变量,通过npm命令传入。
然而,遇到一个问题,我确实传入了变量,在代码中怎么接收这个变量并应用呢?
首先,在config.js文件里,打印出process.env,发现变量确实成功设置了。比如,我的npm命令是
$ npm run build --ip=10.61.13.147:8033,那么我console.log(process.env.npm_config_ip)确实可以打印出10.61.13.147:8033。但是,在其他js文件中打印这个变量,就获取不到。
那我存localstorage总可以吧,结果发现,用localstorage会报错。多方查资料。发现,需要在config.js文件中,export的defineConfig中再定义一下变量。
const API_IP = process.env.npm_config_ip;
export default defineConfig({
hash: true,
antd: {
},
dva: {
hmr: true,
},
layout: {
// https://umijs.org/zh-CN/plugins/plugin-layout
locale: true,
siderWidth: 208,
...defaultSettings,
},
// https://umijs.org/zh-CN/plugins/plugin-locale
locale: {
// default zh-CN
default: 'zh-CN',
antd: true,
// default true, when it is true, will use `navigator.language` overwrite default
baseNavigator: true,
},
dynamicImport: {
loading: '@ant-design/pro-layout/es/PageLoading',
},
targets: {
ie: 11,
},
// umi routes: https://umijs.org/docs/routing
routes: [
{
path: '/user',
layout: false,
routes: [
{
path: '/user/login',
layout: false,
name: 'login'