use new alias @ which default set in umi

config/config.js

@@ -21,14 +21,12 @@ export default {
           baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
         },
         polyfills: ['ie9'],
-        ...(
-          (!process.env.TEST && require('os').platform() === 'darwin')
+        ...(!process.env.TEST && require('os').platform() === 'darwin'
           ? {
               dll: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
               hardSource: true,
             }
-          : {}
-        ),
+          : {}),
       },
     ],
   ],
@@ -42,12 +40,6 @@ export default {
     '@antv/data-set': 'DataSet',
     rollbar: 'rollbar',
   },
-  alias: {
-    components: path.resolve(__dirname, '../src/components/'),
-    utils: path.resolve(__dirname, '../src/utils/'),
-    assets: path.resolve(__dirname, '../src/assets/'),
-    common: path.resolve(__dirname, '../src/common/'),
-  },
   ignoreMomentLocale: true,
   lessLoaderOptions: {
     javascriptEnabled: true,

jsconfig.json

@@ -4,7 +4,7 @@
     "experimentalDecorators": true,
     "baseUrl": ".",
     "paths": {
-      "components/*": ["./src/components/*"]
+      "@/*": ["./src/*"]
     }
   }
 }

src/layouts/BasicLayout.js

@@ -8,9 +8,9 @@ import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
 import pathToRegexp from 'path-to-regexp';
 import { formatMessage } from 'umi/locale';
-import SiderMenu from '../components/SiderMenu';
-import Authorized from '../utils/Authorized';
-import SettingDarwer from '../components/SettingDarwer';
+import SiderMenu from '@/components/SiderMenu';
+import Authorized from '@/utils/Authorized';
+import SettingDarwer from '@/components/SettingDarwer';
 import logo from '../assets/logo.svg';
 import Footer from './Footer';
 import Header from './Header';

src/layouts/Footer.js

 import React, { Fragment } from 'react';
 import { Layout, Icon } from 'antd';
-import GlobalFooter from '../components/GlobalFooter';
+import GlobalFooter from '@/components/GlobalFooter';
 
 const { Footer } = Layout;
 const FooterView = () => (

src/layouts/Header.js

@@ -3,10 +3,10 @@ import { Layout, message } from 'antd';
 import Animate from 'rc-animate';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
-import GlobalHeader from '../components/GlobalHeader';
-import TopNavHeader from '../components/TopNavHeader';
+import GlobalHeader from '@/components/GlobalHeader';
+import TopNavHeader from '@/components/TopNavHeader';
 import styles from './Header.less';
-import Authorized from '../utils/Authorized';
+import Authorized from '@/utils/Authorized';
 
 const { Header } = Layout;
 

src/layouts/PageHeaderLayout.js

 import React from 'react';
 import { FormattedMessage } from 'umi/locale';
 import { Link } from 'dva/router';
-import PageHeader from 'components/PageHeader';
+import PageHeader from '@/components/PageHeader';
 import GridContent from './GridContent';
 import styles from './PageHeaderLayout.less';
 import MenuContext from './MenuContext';

src/layouts/UserLayout.js

 import React, { Fragment } from 'react';
 import { Link } from 'dva/router';
 import { Icon } from 'antd';
-import GlobalFooter from '../components/GlobalFooter';
+import GlobalFooter from '@/components/GlobalFooter';
 import styles from './UserLayout.less';
 import logo from '../assets/logo.svg';
 

src/pages/404.js

 import React from 'react';
 import { Link } from 'dva/router';
-import Exception from 'components/Exception';
+import Exception from '@/components/Exception';
 
 export default () => (
   <Exception type="404" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />

src/pages/Account/Center/Applications.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd';
 import numeral from 'numeral';
 import { connect } from 'dva';
-import { formatWan } from '../../../utils/utils';
+import { formatWan } from '@/utils/utils';
 import stylesApplications from '../../List/Applications.less';
 
 @connect(({ list }) => ({

src/pages/Account/Center/Center.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .avatarHolder {
   text-align: center;

src/pages/Account/Center/Projects.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { List, Card } from 'antd';
 import moment from 'moment';
 import { connect } from 'dva';
-import AvatarList from '../../../components/AvatarList';
+import AvatarList from '@/components/AvatarList';
 import stylesProjects from '../../List/Projects.less';
 
 @connect(({ list }) => ({

src/pages/Account/Settings/BaseView.js

@@ -5,7 +5,7 @@ import { connect } from 'dva';
 import styles from './BaseView.less';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
-// import { getTimeDistance } from '../../../utils/utils';
+// import { getTimeDistance } from '@/utils/utils';
 
 const FormItem = Form.Item;
 const { Option } = Select;

src/pages/Account/Settings/SecurityView.js

 import React, { Component, Fragment } from 'react';
 import { formatMessage, FormattedMessage } from 'umi/locale';
 import { List } from 'antd';
-// import { getTimeDistance } from '../../../utils/utils';
+// import { getTimeDistance } from '@/utils/utils';
 
 const passwordStrength = {
   strong: (
@@ -16,7 +16,8 @@ const passwordStrength = {
   ),
   weak: (
     <font className="weak">
-      <FormattedMessage id="app.settings.security.weak" defaultMessage="Weak" />Weak
+      <FormattedMessage id="app.settings.security.weak" defaultMessage="Weak" />
+      Weak
     </font>
   ),
 };
@@ -28,9 +29,8 @@ class SecurityView extends Component {
         title: formatMessage({ id: 'app.settings.security.password' }, {}),
         description: (
           <Fragment>
-            {formatMessage({ id: 'app.settings.security.password-description' }, {})}：{
-              passwordStrength.strong
-            }
+            {formatMessage({ id: 'app.settings.security.password-description' }, {})}：
+            {passwordStrength.strong}
           </Fragment>
         ),
         actions: [

src/pages/Account/Settings/services/geographic.js

-import request from '../../../../utils/request';
+import request from '@/utils/request';
 
 export async function queryProvince() {
   return request('/api/geographic/province');

src/pages/Dashboard/Analysis.js

@@ -23,9 +23,9 @@ import {
   Bar,
   Pie,
   TimelineChart,
-} from 'components/Charts';
-import Trend from 'components/Trend';
-import NumberInfo from 'components/NumberInfo';
+} from '@/components/Charts';
+import Trend from '@/components/Trend';
+import NumberInfo from '@/components/NumberInfo';
 import numeral from 'numeral';
 import GridContent from '@/layouts/GridContent';
 import Yuan from '@/utils/Yuan';

src/pages/Dashboard/Analysis.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .iconGroup {
   i {

src/pages/Dashboard/Monitor.js

 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
 import { Row, Col, Card, Tooltip } from 'antd';
-import { Pie, WaterWave, Gauge, TagCloud } from 'components/Charts';
-import NumberInfo from 'components/NumberInfo';
-import CountDown from 'components/CountDown';
-import ActiveChart from 'components/ActiveChart';
+import { Pie, WaterWave, Gauge, TagCloud } from '@/components/Charts';
+import NumberInfo from '@/components/NumberInfo';
+import CountDown from '@/components/CountDown';
+import ActiveChart from '@/components/ActiveChart';
 import numeral from 'numeral';
 import GridContent from '@/layouts/GridContent';
 

src/pages/Dashboard/Monitor.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .mapChart {
   padding-top: 24px;

src/pages/Dashboard/Workplace.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .activitiesList {
   padding: 0 24px 8px 24px;

src/pages/Exception/403.js

 import React, { Component } from 'react';
 import { formatMessage } from 'umi/locale';
 import { Link } from 'dva/router';
-import Exception from 'components/Exception';
+import Exception from '@/components/Exception';
 
 class Exception403 extends Component {
   render() {

src/pages/Exception/404.js

 import React, { Component } from 'react';
 import { formatMessage } from 'umi/locale';
 import { Link } from 'dva/router';
-import Exception from 'components/Exception';
+import Exception from '@/components/Exception';
 
 class Exception404 extends Component {
   render() {

src/pages/Exception/500.js

 import React, { Component } from 'react';
 import { formatMessage } from 'umi/locale';
 import { Link } from 'dva/router';
-import Exception from 'components/Exception';
+import Exception from '@/components/Exception';
 
 class Exception500 extends Component {
   render() {

src/pages/Forms/AdvancedForm.js

@@ -13,7 +13,7 @@ import {
   Popover,
 } from 'antd';
 import { connect } from 'dva';
-import FooterToolbar from 'components/FooterToolbar';
+import FooterToolbar from '@/components/FooterToolbar';
 import PageHeaderLayout from '@/layouts/PageHeaderLayout';
 import TableForm from './TableForm';
 import styles from './style.less';

src/pages/Forms/StepForm/Step2.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'dva';
 import { Form, Input, Button, Alert, Divider } from 'antd';
 import { routerRedux } from 'dva/router';
-import { digitUppercase } from '../../../utils/utils';
+import { digitUppercase } from '@/utils/utils';
 import styles from './style.less';
 
 const formItemLayout = {
@@ -55,11 +55,7 @@ class Step2 extends React.PureComponent {
         </Form.Item>
         <Form.Item {...formItemLayout} className={styles.stepFormText} label="转账金额">
           <span className={styles.money}>{data.amount}</span>
-          <span className={styles.uppercase}>
-            （
-            {digitUppercase(data.amount)}
-            ）
-          </span>
+          <span className={styles.uppercase}>（{digitUppercase(data.amount)}）</span>
         </Form.Item>
         <Divider style={{ margin: '24px 0' }} />
         <Form.Item {...formItemLayout} label="支付密码" required={false}>

src/pages/Forms/StepForm/Step3.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { connect } from 'dva';
 import { Button, Row, Col } from 'antd';
 import { routerRedux } from 'dva/router';
-import Result from 'components/Result';
+import Result from '@/components/Result';
 import styles from './style.less';
 
 @connect(({ form }) => ({

src/pages/Forms/StepForm/index.js

@@ -4,7 +4,7 @@ import PageHeaderLayout from '@/layouts/PageHeaderLayout';
 import styles from '../style.less';
 
 // import { Route, Redirect, Switch } from 'dva/router';
-// import { getRoutes } from '../../../utils/utils';
+// import { getRoutes } from '@/utils/utils';
 
 const { Step } = Steps;
 

src/pages/List/Applications.js

@@ -2,10 +2,10 @@ import React, { PureComponent } from 'react';
 import numeral from 'numeral';
 import { connect } from 'dva';
 import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd';
-import TagSelect from 'components/TagSelect';
-import StandardFormRow from 'components/StandardFormRow';
+import TagSelect from '@/components/TagSelect';
+import StandardFormRow from '@/components/StandardFormRow';
 
-import { formatWan } from '../../utils/utils';
+import { formatWan } from '@/utils/utils';
 
 import styles from './Applications.less';
 

src/pages/List/Applications.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .filterCardList {
   margin-bottom: -24px;

src/pages/List/Articles.js

@@ -3,8 +3,8 @@ import moment from 'moment';
 import { connect } from 'dva';
 import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd';
 
-import TagSelect from 'components/TagSelect';
-import StandardFormRow from 'components/StandardFormRow';
+import TagSelect from '@/components/TagSelect';
+import StandardFormRow from '@/components/StandardFormRow';
 import styles from './Articles.less';
 
 const { Option } = Select;

src/pages/List/Articles.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .listContent {
   .description {

src/pages/List/BasicList.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .standardList {
   :global {

src/pages/List/CardList.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { connect } from 'dva';
 import { Card, Button, Icon, List } from 'antd';
 
-import Ellipsis from 'components/Ellipsis';
+import Ellipsis from '@/components/Ellipsis';
 import PageHeaderLayout from '@/layouts/PageHeaderLayout';
 
 import styles from './CardList.less';

src/pages/List/CardList.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .cardList {
   margin-bottom: -24px;

src/pages/List/Projects.js

@@ -3,10 +3,10 @@ import moment from 'moment';
 import { connect } from 'dva';
 import { Row, Col, Form, Card, Select, List } from 'antd';
 
-import TagSelect from 'components/TagSelect';
-import AvatarList from 'components/AvatarList';
-import Ellipsis from 'components/Ellipsis';
-import StandardFormRow from 'components/StandardFormRow';
+import TagSelect from '@/components/TagSelect';
+import AvatarList from '@/components/AvatarList';
+import Ellipsis from '@/components/Ellipsis';
+import StandardFormRow from '@/components/StandardFormRow';
 
 import styles from './Projects.less';
 

src/pages/List/Projects.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .coverCardList {
   margin-bottom: -24px;

src/pages/List/TableList.js

@@ -21,7 +21,7 @@ import {
   Steps,
   Radio,
 } from 'antd';
-import StandardTable from 'components/StandardTable';
+import StandardTable from '@/components/StandardTable';
 import PageHeaderLayout from '@/layouts/PageHeaderLayout';
 
 import styles from './TableList.less';

src/pages/List/TableList.less

 @import '~antd/lib/style/themes/default.less';
-@import '../../utils/utils.less';
+@import '~@/utils/utils.less';
 
 .tableList {
   .tableListOperator {

src/pages/Profile/AdvancedProfile.js

@@ -18,7 +18,7 @@ import {
   Divider,
 } from 'antd';
 import classNames from 'classnames';
-import DescriptionList from 'components/DescriptionList';
+import DescriptionList from '@/components/DescriptionList';
 import PageHeaderLayout from '@/layouts/PageHeaderLayout';
 import styles from './AdvancedProfile.less';
 

src/pages/Profile/BasicProfile.js

 import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Card, Badge, Table, Divider } from 'antd';
-import DescriptionList from 'components/DescriptionList';
+import DescriptionList from '@/components/DescriptionList';
 import PageHeaderLayout from '@/layouts/PageHeaderLayout';
 import styles from './BasicProfile.less';
 

src/pages/Result/Success.js

 import React, { Fragment } from 'react';
 import { formatMessage, FormattedMessage } from 'umi/locale';
 import { Button, Row, Col, Icon, Steps, Card } from 'antd';
-import Result from 'components/Result';
+import Result from '@/components/Result';
 import PageHeaderLayout from '@/layouts/PageHeaderLayout';
 
 const { Step } = Steps;

src/pages/User/Login.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Link } from 'dva/router';
 import { Checkbox, Alert, Icon } from 'antd';
-import Login from 'components/Login';
+import Login from '@/components/Login';
 import styles from './Login.less';
 
 const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

src/pages/User/RegisterResult.js

 import React from 'react';
 import { Button } from 'antd';
 import { Link } from 'dva/router';
-import Result from 'components/Result';
+import Result from '@/components/Result';
 import styles from './RegisterResult.less';
 
 const actions = (

src/services/api.js

 import { stringify } from 'qs';
-import request from '../utils/request';
+import request from '@/utils/request';
 
 export async function queryProjectNotice() {
   return request('/api/project/notice');

src/services/error.js

-import request from '../utils/request';
+import request from '@/utils/request';
 
 export async function query(code) {
   return request(`/api/${code}`);

src/services/user.js

-import request from '../utils/request';
+import request from '@/utils/request';
 
 export async function query() {
   return request('/api/users');

src/utils/Authorized.js

-import RenderAuthorized from '../components/Authorized';
+import RenderAuthorized from '@/components/Authorized';
 import { getAuthority } from './authority';
 
 let Authorized = RenderAuthorized(getAuthority()); // eslint-disable-line

src/utils/Yuan.js

 import React from 'react';
-import { yuan } from 'components/Charts';
+import { yuan } from '@/components/Charts';
 /**
  * 减少使用 dangerouslySetInnerHTML
  */