如何简单配置react项目中@路径，实现高效开发？

本文共计526个文字，预计阅读时间需要3分钟。

目录+前言

1.安装craco

2.在根路径下创建craco.config.js

3.修改package.json文件的script字段

4.使用：React 配置 @ + 路径别名

总结+前言无论是Vue还是React开发，我们经常需要引入路径的便捷化。以下是一些建议步骤：

目录

• 前言
• 1. 安装craco
• 2.根路径下创建 craco.config.js
• 3. 修改package.json文件的script字段
• 4.使用
• 补充：React 配置 @ 路径别名
• 总结

前言

无论是vue还是react开发，我们通常需要引入路径的便捷化配置，通常我们都会约定使用路径@作为根路径地址。如果是个人react开发的@路径简单配置

1. 安装craco

yarn add @craco/craco

2.根路径下创建 craco.config.js

const path = require("path") module.exports = { webpack:{ alias:{ "@":path.resolve(__dirname,"src") } } }

3. 修改package.json文件的script字段

"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" },

4.使用

import "@/router/index"

补充：React 配置 @ 路径别名

第一步安装依赖

yarn add react-app-rewired customize-cra

第二步修改 package.json 配置，将 react-scripts 修改成 react-app-rewired

"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },

第三步在根目录下创建config-overrides.js 文件

const { override, addWebpackAlias } = require("customize-cra"); const path = require("path"); module.exports = override( //增加路径别名的处理 addWebpackAlias({ '@': path.resolve('./src') }) );

第四步在tsconfig.json 文件中加入 baseUrl 和 paths

{ "compilerOptions": { "baseUrl": "src", "paths": { "@/*": [ "*" ] } }

最后重新启动就能通过 @ 引入文件里

import { login } from '@/api/login'

总结

到此这篇关于react项目中@路径简单配置的文章就介绍到这了,更多相关react@路径配置内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！