文章環(huán)境：

“react”: “^16.13.1” 版本

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

1、輸入命令 npm run eject

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

輸入 y 回車

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

2、打開 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)行改動后，都需要重新啟動項目，不然不生效

5、在項目中使用

打開 index.js ,將 import ./index.css 替換成 import '@/index.css’

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

6、啟動項目， 無報錯，并且樣式生效

總結(jié)

以上是生活随笔為你收集整理的php设置路径别名,react设置文件路径别名的具体方法你知道么的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。