脚手架搭建react项目遇到的问题?

2023-11-20

一.配置proxy代理

配置代理其实很简单,但是理解其中我还不是太懂,贴一下代码看一下配置吧!



说一下我遇见的问题,因为以前用webpack配置需要在config里配置devServer,网查脚手架搭建的项目不用这么麻烦,直接package.json里配置就ok。配置完成一直出现404 not found,最后发现是我引得不对,宛如智障一个,拽着朋友检查,别粗心。(ps:过段时间有空仔细研究一下其中原理)

二.引入antd,但是没有样式,我真是跪了,因为版本,我查了N久的文档

因为Antd依赖于Less,所以安装好less less-loader  

npm install --save-dev less-loader less

贴一下这位大神的解答,这种方法只要用对版本(less2.x)应该是可以的 链接:http://cnodejs.org/topic/5a31f0bdd92f2f5b185ace61

我的方法:

1.安装好less、less-loader的基础上在package.json配置好plugins(注意是plugins啊,不要少个s)

2.分别在webpack.config.dev和webpack.config.prod 查找test: /\.css$/替换成test: /\.(css|less)$/,

在test下找到use,添加less-loader

use: [
{...},
{...},
,{
       loader: require.resolve('less-loader'), // compiles Less to CSS
       options: { javascriptEnabled: true } //就是因为它!!!!如果你是less3.x的版本就加上这句话,不然就会报错下图
 }
],


成功啦!!!


三.也差不多了就像试试npm run build,也不报错但是就是不行,让我安装什么npm i -g server server -build,看不懂,我在解决第二个问题的时候看了一大神的帖子,链接如下:https://www.jianshu.com/p/f01373945c00

大神的解释是:用create-react-app脚手架搭建的react项目使用 npm run build 之后生成的打包文件只能在根目录访问,这样放在服务器目录就访问不到了,so多加一个点就ok啊。。。

还有一个问题是路由的问题,因为我用的react-router4.0起初用的是BrowserRouter路由,但是打包后报错

react:Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL

大家都推荐使用HashRouter,结果真的可以,路由我还没来得及好好看文档。

初学者请多关照,友好交流。。。。





转载于:https://juejin.im/post/5ae4432df265da0b7f445008

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

脚手架搭建react项目遇到的问题? 的相关文章

  • Webpack 与 typescript 获取 TypeScript 发出无输出错误

    我从这里得到了这个配置https www npmjs com package ts loader https www npmjs com package ts loader webpack config js var path requir
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像

    我使用 DirectionsRender 绘制了一条路线 但我不知道如何用我自己的标记替换通用的 Google 标记 我知道并在正常的谷歌地图情况下使用它 但发现很难用开始和结束的方向标记来做到这一点 如果这是一个愚蠢的问题 感谢您的任何建
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 使用 x509 证书签署 json 文档或字符串

    如何使用 x509 证书签署 json 文档或字符串 public static void fund string filePath C Users VIKAS Desktop Data xml Read the file XmlDocum
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • Cypress 在 Create React App 中返回 .scss 文件的 webpack 编译错误

    我正在尝试将 Cypress 添加到非常基本的 CRA 但遇到了 Cypress 无法理解 scss 文件的问题 当我跑步时npm run cypress运行测试 我收到以下错误 Error Webpack Compilation Erro
  • 将 List 转换为 JSON

    Hi guys 有人可以帮助我 如何将我的 HQL 查询结果转换为带有对象列表的 JSON 并通过休息服务获取它 这是我的服务方法 它返回查询结果列表 Override public List
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接

随机推荐

  • Golang连接Jenkins获取Job Build状态及相关信息

    文章目录 1 连接Jenkins 2 controller 3 module 4 router 5 效果展示 第三方包 gojenkins 方法文档 gojenkins docs 实现起来很简单 利用第三方库 连接jenkins 调用相关方
  • flutter解决键盘顶起页面

    前言 flutter中解决键盘顶起页面的问题 flutter 1 Scaffold resizeToAvoidBottomPadding return Scaffold resizeToAvoidBottomPadding false 解决
  • 使用OpenCV与深度学习从视频和图像中精准识别人脸: Python实践指南

    第一部分 引言与背景 人脸识别已经成为了当代技术领域中最热门和广泛应用的话题之一 从智能手机的解锁功能到机场的安全检查 人脸识别技术无处不在 在这篇文章中 我们将使用Python中的OpenCV库和深度学习模型 深入探讨如何从视频和图像中精
  • js 对数组对象进行排序

    let listData id 1 name 测试1 presenttime 1557883600000 id 2 name 测试2 presenttime 1580751813000 id 3 presenttime 1561448381
  • svn版本号,命令中-r 2和@2的区别

    问题 假设有一个svn repository是 svn 192 168 2 6 project 在版本1 20的svn里 存在 svn 192 168 2 6 project branches branch test 在版本21时 由于br
  • BUUCTF-Web-命令执行-[ACTF2020 新生赛]Exec

    BUUCTF Web 命令执行 ACTF2020 新生赛 Exec 题目链接 BUUCTF 类型 命令注入 知识点 命令拼接符 解题过程 这道题目比较简单 打开发现是一个ping命令执行页面 使用post接受参数 测试命令拼接符 发现未进行
  • CMW500测试设置及问题处理

    测试CATM1需要打开eMTC Auto Mode 最新的U BLOX R510S模块 这里需要设置为RMC模式 设置为eMTC Auto Mode会出现连接后就断开的情况 没法测试 Measure subframe设置为5 不同的band
  • Kubernetes生产实践系列之三十一:Kubernetes基础技术之CPU资源的调度和管理(CFS)

    一 前言 在使用Kubernetes的过程中 我们看到过这样一个告警信息 K8S 告警主题 CPUThrottlingHigh 告警级别 warning 告警类型 CPUThrottlingHigh 故障实例 告警详情 27 throttl
  • android bluetooth UUID蓝牙查询表

    UUID是 Universally Unique Identifier 的简称 通用唯一识别码的意思 对于蓝牙设备 每个服务都有通用 独立 唯一的UUID与之对应 也就是说 在同一时间 同一地点 不可能有两个相同的UUID标识的不同服务 以
  • .Net C# 使用 IKVM 调用 Java 代码

    相关开源库 https github com ikvm revived 版本号 Net 6 JDK 8 IKVM 8 2 1 IKVM 在 8 2 0 版本中新增加 IkvmReference 在 MSBuild 中配置 自动帮你编译jar
  • 虚拟机打开vim文件以后退出方式

    如果是vi 则 Esc 退出编辑模式 输入以下命令 wq 保存后退出vi 若为 wq 则为强制储存后退出 常用 w 保存但不退出 常用 w 若文件属性为 只读 时 强制写入该档案 q 离开 vi 常用 q 若曾修改过档案 又不想储存 使用
  • python制作查询工具发给别人使用_Python 制作查询商品历史价格的小工具

    一年一度的双十一就快到了 各种砍价 盖楼 挖现金的口令将在未来一个月内充斥朋友圈 微信群中 玩过多次双十一活动的小编表示一顿操作猛如虎 一看结果2毛5 浪费时间不说而且未必得到真正的优惠 双十一电商的 明降暗升 已经是默认的潜规则了 打破这
  • 为何在新建STM工程中全局声明两个宏

    在uVision中新建STM32工程后 需要从STM32标准库中拷贝标准外设驱动到自己的工程目录中 此时需要在工程设置 gt C C 选项卡下的Define文本框中键入这两个全局宏定义 STM32F40 41xxx USE STDPERIP
  • 二叉树的一些练习题

    前言 二叉树的简单题目 通过画栈帧图去理解过程 画一画 走一走递归过程 理解会更加深刻 二叉树练习题 前言 二叉树的创建 二叉树先序遍历创建 PreCreat 二叉树层次创建 LevelCreat 二叉树的销毁 BinaryTreeDest
  • 二分法查找数组元素

    二分法查找元素时可以节省下极高的效率 如果有2的32次方个元素 依次查找需要查找2的32次方次 然而二分查找最多只用查找32次 程序执行的时间极大的缩短 二分法查找元素 include
  • nginx中location里面的try_files配置导致Vue设置history模式下的请求丢失参数

    nginx中location里面的try files配置导致vue设置history模式下的请求丢失参数 背景描述 在一次生产环境中 vue使用history模式在访问地址的参数会丢失 地址栏也会变成没有参数的地址 并且请求会发生301重定
  • 快速排序算法详解(原理,时间复杂度,实现代码)

    快速排序算法详解 原理 实现和时间复杂度 快速排序是对冒泡排序的一种改进 由 C A R Hoare Charles Antony Richard Hoare 东尼 霍尔 在 1962 年提出 快速排序的基本思想是 通过一趟排序将要排序的数
  • sql 字段求和_VBA+SQL-常用函数

    SQL语句中的一些简单计算函数 如max函数 SELECT MAX 列字段 AS 别名1 FROM 工作表名 如AVG函数 SELECT AVG 列字段 AS 别名1 FROM 工作表名 使用实例说明 源数据 查询内容 对英语成绩最高分 对
  • 【Java基础】day13

    day13 一 Spring Bean 生命周期是怎样的 详细过程分为以下几个步骤 初始化 Bean 容器通过获取 BeanDefinition 中的信息进行实例化 这一步仅仅是简单的实例化 并没有进行依赖注入 实例化的对象被包装在 Bea
  • 脚手架搭建react项目遇到的问题?

    一 配置proxy代理 配置代理其实很简单 但是理解其中我还不是太懂 贴一下代码看一下配置吧 说一下我遇见的问题 因为以前用webpack配置需要在config里配置devServer 网查脚手架搭建的项目不用这么麻烦 直接package