日韩精品欧美激情国产一区_中文无码精品一区二区三区在线_岛国毛片AV在线无码不卡_亞洲歐美日韓精品在線_使劲操好爽好粗视频在线播放_日韩一区欧美二区_八戒八戒网影院在线观看神马_亚洲怡红院在线色网_av无码不卡亚洲电影_国产麻豆媒体MDX

React-配置別名

時(shí)間:2024-09-25 10:25:11 類(lèi)型:React
字號(hào):    

在 React 中,我們不能直接使用 @ 去表示 src 文件夾,需要額外的配置

1, 安裝craco工具包

    這個(gè)工具包是專(zhuān)門(mén)在(cra-Create React App環(huán)境下擴(kuò)展webpack 的一個(gè)工具包!

npm i @craco/craco -D

2,增加 craco.config.js 配置文件(項(xiàng)目根目錄下增加)

const path = require('path');
module.exports = {
    // 以下是webpack的配置信息
    webpack: {
      // 配置別名
      alias: {
        '@': path.resolve(__dirname, 'src')
        // 約定使用 @ 表示 src 文件所在目錄
      }
    }
  };

3,  修改package.json的script命令

//原來(lái)
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
 //修改后:
 "scripts": {
    "start": "craco start",
    "build": "craco  build",
    "test": "craco  test",
    "eject": "craco  eject"
  }

    修改完之后,記得修改項(xiàng)目

4, 路徑聯(lián)想配置(VScode),VScode在輸入@/ 時(shí),自動(dòng)聯(lián)想對(duì)應(yīng)src/ 下的目錄

(1)在根目錄新建jsconfig.json文件

(2)配置

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


<