配置@別名路徑

通過@代替src路徑,方便開發(fā)過程中的路徑查找訪問
如何配置:

  1. 路徑轉換,修改webpack別名路徑配置craco
  • 配置craco工具包
npm i @craco/craco -D
  • 根目錄下創(chuàng)建craco.config.js配置文件
// 擴展webpack的配置
const path = require('path')
module.exports = {
    // webpack 配置
    webpack: {
        alias: {
            // 約定:使用@表示src文件所在路徑
            '@': path.resolve(__dirname, 'src')
        }
    }
}
  • 修改scripts命令


    image.png
  • 測試
//  "@/pages/Login" = "src/pages/Login"
npm start
  1. VSCode聯(lián)想提示,修改VSCode配置jsconfig.json
  • 在項目根目錄創(chuàng)建jsconfig.json 配置文件
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    }
}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容