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

2024-04-11 10:59:49

文章写时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': 'react-native-web',
   // Allows for better profiling with ReactDevTools
   ...(isEnvProductionProfile && {
     'react-dom$': 'react-dom/profiling',
     'scheduler/tracing': 'scheduler/tracing-profiling',
   }),
   ...(modules.webpackAliases || {}),
},

3修改如下，然后重启项目

alias: {
   // Support React Native Web
   // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
   'react-native': 'react-native-web',
   // Allows for better profiling with ReactDevTools
   ...(isEnvProductionProfile && {
     'react-dom$': 'react-dom/profiling',
     'scheduler/tracing': 'scheduler/tracing-profiling',
   }),
   ...(modules.webpackAliases || {}),
   // 文件路径别名
   '@': path.resolve(__dirname, '../src'),
   '@view': path.resolve(__dirname, '../src/view'),
},

配置代理：

简单版配置：

package.json中直接添加："proxy": "http://localhost:4000"

完整版本配置：
(1).下载：yarn add http-proxy-middleware
(2).在src目录下创建：setupProxy.js，内容如下：

  const proxy = require('http-proxy-middleware')
  module.exports = function(app) {
   app.use(
    proxy.createProxyMiddleware('/api', {  //带有api是需要转发的请求
     target: 'http://localhost:4000',  // 这里是服务器地址
     changeOrigin: true,//值为布尔值, 为true时, 本地就会虚拟一个服务器接收你的请求并代你发送该请求,
     pathRewrite: {'^/api': ''}
    })
   )
  }

3.备注：react脚手架的配置代理后，在请求资源时会优先请求前端资源，若没有再请求后端资源。

到此这篇关于react脚手架配置路径别名的方法的文章就介绍到这了,更多相关react脚手架配置路径别名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

react如何快速设置文件路径别名

React是用于构建用户界面的JavaScript库, 起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagra
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
vue.config.js中配置Vue的路径别名的方法

在官方的vue-cli配置参考中存在一个configureWebpack webpack中有一个配置路径别名的属性 const path = require('path') module.exports = { // 对象和函数都可以,如果要控制开发环境可以选择函数 configureWebpack:{ resolve:{ alias:{ 'assets':path.resolve('./src/assets') } } } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我
Vue CL3 配置路径别名详解

Cli3工具中,配置路径别名最近用Vue Cli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,发现都在vue.config.js里来配置了配置路径别名,方便引用,不用写那么长配置前: import TodoList from '../../components/TodoList' 配置后(不用再关心文件层级关系): import TodoList from 'components/TodoList' 在根目录下添加'vue
react脚手架配置代理的实现

目录方法一方法二方法一在package.json 中追加如下配置 "proxy":"http://localhost:5000" 说明: 优点: 配置简单,前端请求资源时可以不加任何前缀. 缺点:不能配置多个代理工作方式: 当请求了 3000 不存在的资源时,那么该请求会转发给5000(优先匹配前端资源) 方法二创建代理配置文件,文件名为 setupProxy.js 名字不能改在src下创建配置文件: src/setupProxy.js 编写setup
Typescript中使用引用路径别名报错的解决方法

在TS中引用路径别名提示找不到模块或者相应的声明 1.ts中使用路径别名报错在react中通常路径别名都是在webpack的webpack.config.js文件中配置的,但是在引入了ts之后,webpack中的路径别名引用失效了此时我们需要在跟src文件同级目录的tsconfig.json文件中添加配置: 注意要在compilerOptions中添加(webpack中的路径也需要配置) "compilerOptions": { "target": "e
typescript+vite项目配置别名的方法实现

我们为了省略冗长的路径,经常喜欢配置路径别名.但是在typescript下会遇到一些坑,比如导入路径不能以“.ts”扩展名结束,路径不识别等.下面我记录了我的处理方法. vite.config.js: export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src') // 配置别名 } } }) 配置完之后,就可以在ide中使用别名了.但是这个时候我发现,
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脚手架如何配置less和ant按需加载的方法步骤

前言 create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成一.react脚手架搭建 1.先全局安装create-react-app(提前需要安装node) npm install -g create-react-app 2.然后通过create-react-app创建项目my-app create-react-app my-app 3.最后通过cd进入项目文件夹并启动 cd my-app
Linux系统为命令配置别名的方法

什么是别名在管理和维护Linux系统的过程中,将会使用到大量命令,有一些很长的命令或用法经常被用到,重复而频繁的输入某个很长命令或用法是不可取的.这时可以使用别名功能将这个过程简单化. Linux系统下有的命令如 rm cp mv 等这些命令是删除移动之类的使用时要谨慎也可以通过设置别名来进行变相的一些的提醒简单来说 1.使用危险的命令前给予警告 cp rm mv 2.复杂命令使用更加方便问题:为rm配置别名 do not use rm即运行rm命令的时候系统提

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

配置代理：

相关推荐

随机推荐