您现在的位置是：网站首页> 编程资料编程资料

react项目中@路径简单配置指南_React_

2023-05-24 493人已围观

简介 react项目中@路径简单配置指南_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 @路径配置内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：使用Vue3实现羊了个羊的算法_vue.js_

下一篇：react  Suspense工作原理解析_React_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网