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 @路径配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react脚手架配置路径别名的方法

    文章写时react版本16.13.1 1输入命令 npm run eject 在项目根目录下生成config目录 2在confilg下打开webpack.config.js文件找到如下位置 alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'reac

  • 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 = req

  • 如何在React项目中优雅的使用对话框

    如何在React项目中优雅的使用对话框

    目录 背景 场景一 场景二 场景三 问题一:难以扩展 问题二:维护问题 问题的本质 对话框的本质 全局的状态管理的对话框 整体的架构 具体实现 Redux - reducer 存储 Redux - action 处理对话框的显示隐藏 Hook - useCommonModal 创建对话框-容器模块 对话框返回值处理 运行实例 总结 参考 背景 对话框在前端开发应用中,是一种非常常用的界面模式.对话框作为一个独立的窗口,常常被用于信息的展示,输入信息,亦或者更多其他功能.但是项目的使用过程中,在某

  • Vue中的Vux配置指南

    简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 如何创建一个Flask项目并进行简单配置

    安装的依赖包 flask pymysql flask_script flask_migrate flask_sqlalchemy 创建Flask项目(项目目录结构) flaskexample |---static |---templates |---app.py 在项目下创建settings文件,进行配置 setting.py class DevelopmentConfig: DEBUG = True SQLALCHEMY_DATABASE_URI=mysql+pymysql://用户:密码@h

  • TypeScript在React项目中的使用实践总结

    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具

  • react 项目中引入图片的几种方式

    img标签引入图片 因为react其实是通过js的reader函数渲染的页面,所以直接写src="路径"是无法引入图片 我们可以像引入模块一样引入图片 import img from './../../../../asset/img/user.png' 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的 新建一个css文件,然后就可以直接写

  • Mybatis-plus在项目中的简单应用

    目录 分页插件 逻辑删除 自动填充 乐观锁 多数据源 通用枚举 id生成及主键 查询 LambdaQueryWrapper 本文是一篇随笔,记录项目中应用的一些情景. Mybatis-plus是Spring框架中OOM的一大利器,其简单易用参考官网文档即可很快上手.mp.baomidou.com/guide/ p6spy 执行 SQL 分析打印,只需加入依赖,加入配置文件即可有完美的sql打印.有性能损耗线上不能使用 分页插件 只需注入插件即可,实在太方便了有没有. // 最新版 @Bean p

  • React项目中应用TypeScript的实现

    目录 一.前言 二.使用方式 无状态组件 有状态组件 受控组件 三.总结 一.前言 单独的使用typescript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架的 例如和vue.react 这些框架结合使用的时候,会有一定的门槛 使用 TypeScript 编写 react 代码,除了需要 typescript 这个库之外,还需要安装@types/react.@types/react-dom npm i @types/react -s npm i @types/react-

  • 详解React项目中eslint使用百度风格

    详解React项目中eslint使用百度风格

    1.安装百度Eslint Rule 插件 npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config // react项目 npm i -D eslint-plugin-react eslint-plugin-react-hooks // 如果需要支持typescript的话 npm i -D @typescript-eslint/parser @typescript-eslint/eslint-

随机推荐