Vue或者React項(xiàng)目配置@路徑別名及智能提示方案

更新時(shí)間：2023年10月13日 09:58:24 作者：codeMak1r.小新

這篇文章主要介紹了Vue或者React項(xiàng)目配置@路徑別名及智能提示方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

置別名路徑

以create-react-app創(chuàng)建的React項(xiàng)目為例，帶領(lǐng)大家配置@路徑別名。

本節(jié)目標(biāo): 能夠配置@路徑簡(jiǎn)化路徑處理

自定義 CRA 的默認(rèn)配置

craco 配置文檔

CRA 將所有工程化配置，都隱藏在了 react-scripts 包中，所以項(xiàng)目中看不到任何配置信息

如果要修改 CRA 的默認(rèn)配置，有以下幾種方案：

通過(guò)第三方庫(kù)來(lái)修改，比如，@craco/craco （推薦）
通過(guò)執(zhí)行 yarn eject 命令，釋放 react-scripts 中的所有配置到項(xiàng)目中

實(shí)現(xiàn)步驟

安裝修改 CRA 配置的包：yarn add -D @craco/craco
在項(xiàng)目根目錄中創(chuàng)建 craco 的配置文件：craco.config.js，并在配置文件中配置路徑別名
修改 package.json 中的腳本命令
在代碼中，就可以通過(guò) @ 來(lái)表示 src 目錄的絕對(duì)路徑
重啟項(xiàng)目，讓配置生效

代碼實(shí)現(xiàn)

craco.config.js

const path = require('path')
module.exports = {
  // webpack 配置
  webpack: {
    // 配置別名
    alias: {
      // 約定：使用 @ 表示 src 文件所在路徑
      '@': path.resolve(__dirname, 'src')
    }
  }
}

package.json

// 將 start/build/test 三個(gè)命令修改為 craco 方式
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

路徑別名智能提示方案

在配置好別名路徑之后，我們可以使用@符號(hào)代替*/src路徑，但是我們發(fā)現(xiàn)此時(shí)并不好用。

在這里插入圖片描述

代碼只能引入還是自動(dòng)引入../路徑，手動(dòng)輸入@符號(hào)時(shí)，也沒(méi)有路徑提示。

遇到這個(gè)問(wèn)題，我們有兩種非常簡(jiǎn)單的解決方案

方案一：path-alias插件

VsCode的插件生態(tài)不可謂不豐富，工欲善其事，必先利其器！我們前往VsCode的插件市場(chǎng)，搜索并下載path-alias插件,這個(gè)插件能幫我們做到@符號(hào)路徑別名的智能提示。

未安裝效果：未安裝效果與上圖中一樣，不能智能導(dǎo)入，甚至手動(dòng)導(dǎo)入時(shí)都無(wú)法顯示路徑。

安裝后不光具備路徑別名智能提示，還可以點(diǎn)擊別名路徑跳轉(zhuǎn)到該文件

在這里插入圖片描述

選擇性配置：

path-alias插件只默認(rèn)配置路徑@映射到項(xiàng)目的src目錄，如果需要配置其他的路徑別名的智能提示的話(huà)，需要進(jìn)入VsCode的setting.json文件中，添加：

// 開(kāi)發(fā)項(xiàng)目時(shí)使用路徑別名時(shí)會(huì)有"智能提示" 
"pathAlias.aliasMap": {
  // key是你要定義的別名 | 使用${cwd}來(lái)代替當(dāng)前工作目錄的絕對(duì)路徑
  "@": "${cwd}/src",
  "~": "${cwd}/src",
  "components": "${cwd}/src/components"
},

此時(shí)，輸入component也有會(huì)智能提示了

在這里插入圖片描述

使用path-alias插件缺點(diǎn)：該插件占用內(nèi)存較大，如果內(nèi)存吃緊的話(huà)，可以使用方案二來(lái)解決智能路徑提示的問(wèn)題。

方案二：jsconfig.json文件

在你的項(xiàng)目根目錄下新建: jsconfig.ison文件
內(nèi)存小時(shí)使用，復(fù)制如下到你的文件，重啟vscode即可

{
  "compilerOptions": {
    "experimentalDecorators": true, 
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "assets/*": ["src/assets/*"],
      "views/*": ["src/views/*"],
      "common/*": ["src/common/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}