likes
comments
collection
share

react项目配置@指向src文件夹

作者站长头像
站长
· 阅读数 34

1.开发环境 react

2.电脑系统 windwos11

3.在开发的过程中,我们经常需要引入一些文件,比如说:样式文件/组件文件/图片/方法等,我们在经常引入文件的时候,会通过以下方式去引入:

import { Instance1 } from "../network/Instances/Instance1";
import { Instance2 } from "../network/Instances/Instance2";
//这样写没有错,页能实现文件的引入,但是一旦文件的结构发生了变化,就会找不到这个文件,如果我们找到src目录并且把src目录起一个名字,那么我们引入这个src目录的名字,这样的话我们就能通过这个名字找到src目录不用再../或./了,那么怎么把src目录起名字呢?

4.暴露项目配置项

npm 方式:
    npm run eject
cnpm 方式:
    cnpm run eject
yarn 方式:
    yarn eject

注意:::此步骤不可逆,暴露了配置项的就不能再回去了

5.配置 webpack.config.js见文件:config/webpack.config.js(大概310行附近,搜：alias:)

'@':path.resolve('src')
// 重启项目

react项目配置@指向src文件夹

5-1.上面的文件引入我们就可以这样写了

import { Instance1 } from "@/network/Instances/Instance1";
import { Instance2 } from "@/network/Instances/Instance2";

6.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。