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

 更新时间:2021年09月23日 11:04:12   作者:JeTanO  
本文主要介绍了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': '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脚手架配置路径别名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现可调整倒计时间代码分享

    JS实现可调整倒计时间代码分享

    这篇文章主要介绍了JS实现可调整倒计时间代码,效果很酷炫,也很具有实用价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • 非常优秀的JS图片轮播插件Swiper的用法

    非常优秀的JS图片轮播插件Swiper的用法

    最近在一个微信公众号中用到了swiper图片轮播插件。接下来为大家介绍插件的用法,需要的朋友可以参考下
    2017-01-01
  • 基于zepto.js实现手机相册功能

    基于zepto.js实现手机相册功能

    这篇文章主要为大家详细介绍了基于zepto.js实现手机相册功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 原生js编写贪吃蛇小游戏

    原生js编写贪吃蛇小游戏

    这篇文章主要为大家详细介绍了原生js编写贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JavaScript满天星导航栏实现方法

    JavaScript满天星导航栏实现方法

    本篇文章给大家分享了JavaScript满天星导航栏实现方法,以前也介绍过很多关于特效导航的制作方法,对此有兴趣的朋友参考学习下。
    2018-03-03
  • 前端实现文本对比并高亮显示差异的方法

    前端实现文本对比并高亮显示差异的方法

    文本对比是一个常见需求,尤其在版本控制和代码编辑中,本文介绍了如何使用jsdiff库和diff2html工具来实现文本内容的差异比较和美化显示,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla

    ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla

    使特定于 Internet Explorer 的 Web 应用程序在 Mozilla 上运行时,您遇到过麻烦吗?本文讨论了将应用程序迁移到基于开源 Mozilla 浏览器上时的常见问题。首先讨论跨浏览器开发的基本技术,然后介绍克服 Mozilla 和 Internet Explorer 之间差异的策略。
    2008-04-04
  • ToolTip 通过Js实现代替超链接中的title效果

    ToolTip 通过Js实现代替超链接中的title效果

    ToolTip 通过Js实现代替超链接中的title效果,需要的朋友可以参考下。
    2011-04-04
  • 微信小程序实现密码显示与隐藏的睁眼闭眼功能

    微信小程序实现密码显示与隐藏的睁眼闭眼功能

    这篇文章主要介绍了微信小程序实现密码显示与隐藏的睁眼闭眼功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • 谈谈JavaScript类型系统之Math

    谈谈JavaScript类型系统之Math

    Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法
    2016-01-01

最新评论