react @路径配置
前端兰博 人气:0前言
无论是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'
总结
加载全部内容