react如何設(shè)置文件路徑別名

這篇文章主要介紹了react如何設(shè)置文件路徑別名，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

文章環(huán)境：

“react”: “^16.13.1” 版本

react官方腳手架默認(rèn)是將webpack配置隱藏起來(lái)了，在進(jìn)行配置之前需要將webpack給暴露出來(lái)。

1、輸入命令 npm run eject

會(huì)出現(xiàn)一個(gè)命令提示：這是一個(gè)單向操作，確認(rèn)操作后不可逆轉(zhuǎn)/返回?

輸入 y 回車(chē)

成功之后 在項(xiàng)目根目錄出現(xiàn) config 文件夾

2、打開(kāi) config 文件夾下的 webpack.config.js 文件

3、進(jìn)行搜索 alias ,大概在 291 行的位置

參照如下格式，設(shè)置路徑別名

	alias: {
        // Support react Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with reactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        // 文件路徑別名
        '@': path.resolve(__dirname, '../src'),
        '@view': path.resolve(__dirname, '../src/view'),
      },

需要特別注意的是： webpack配置進(jìn)行改動(dòng)后，都需要重新啟動(dòng)項(xiàng)目，不然不生效

5、在項(xiàng)目中使用

打開(kāi) index.js ,將 import ./index.css 替換成 import '@/index.css’

注： @ 在上面已經(jīng)被設(shè)置 src 文件路徑

6、啟動(dòng)項(xiàng)目， 無(wú)報(bào)錯(cuò)，并且樣式生效

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享react如何設(shè)置文件路徑別名內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!