第一步需要安裝第三方插件支持絕對(duì)路徑: babel-plugin-module-resolver

命令行輸入：

// yarn
 yarn add babel-plugin-module-resolver
// npm
npm install --save-dev babel-plugin-module-resolver

第二部配置根目錄下babel.config.js 兩種方法任選其一

第一種babel.config.js：

plugin: [
    'module-resolver',
    {
      root: ['./src'], // 從哪個(gè)文件開始設(shè)置絕對(duì)路徑
      alias: {
        '@/utils': './src/utils', // 別名
      },
    },
  ],

第二種babel.config.js：大家只需要音頻plugins 配置 以及fs引入；

const { readdirSync } = require('fs');

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        // 那個(gè)文件開始設(shè)置絕對(duì)路徑
        root: ['./src'],
        // 別名配置
        alias: {
          ...readdirSync('./src', { withFileTypes: true }).reduce(
            (res, entry) => {
              let key = entry.name;
              if (!entry.isDirectory()) {
                // remove extension
                const parts = entry.name.split('.');
                parts.pop();

                key = parts.join('');
              }

              return {
                ...res,
                [key]: `./src/${entry.name}`,
              };
            },
            {},
          ),
        },
      },
    ],
  ],
};

第三步配置tsconfig.json

對(duì)應(yīng)第一種：tsconfig.json

// 設(shè)置模塊解析基礎(chǔ)目錄：解析非絕對(duì)路徑模塊名時(shí)的基準(zhǔn)目錄
"baseUrl": "./src",           
       // 模塊路徑映射：一系列映射規(guī)則，將導(dǎo)入路徑重定向到相對(duì)于 "baseUrl" 的查找位置  
    "paths": {
      "@/assets/*": ["assets/*"],
      "@/components/*": ["components/*"],
      "@/config/*": ["config/*"],
      "@/models/*": ["models/*"],
      "@/navigator/*": ["navigator/*"],
      "@/pages/*": ["pages/*"],
      "@/utils/*": ["utils/*"]
    },    

對(duì)應(yīng)第二種：tsconfig.json

"baseUrl": "./",
"paths": {                                           
      "*": ["src/*"],
    },

關(guān)閉所有命令行，重啟項(xiàng)目npm run android 或 yarn android