create-react-app public文件存放静态资源

最新推荐文章于 2024-06-21 17:54:41 发布
最新推荐文章于 2024-06-21 17:54:41 发布
阅读量7.6k 收藏 3
点赞数
分类专栏： react、antDesigin、dva、mobx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbiao68/article/details/101201492
版权

文章目录

问题描述

在工作中，想利用ajax访问工程的json文件，发现使用require或者根据路径选择，没有办法准确访问文件。

解决办法

把静态资源放到 public 文件夹中，启动/打包工程会把public文件夹下面所有的文件和文件夹全部打包放到根目录下，引用的时候去掉public，填写相对的路径

在这里插入图片描述

胖鹅68
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在React Native中构建项目并管理静态资源
cumi6497的博客
07-29 818
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage static resources in React Native) React and React Native are just frameworks, and they do not dictate h...
react打包本地预览_将React项目部署到云开发静态网站
weixin_42648844的博客
01-17 323
React是目前比较火的前端框架之一，除了可以在自有服务器、Github Pages部署以外，现在你有了一个新的选择，那就是使用 云开发静态网站功能 来进行部署。下面详细介绍如何实现。系统依赖在进行后续的内容前，请先确保你的电脑中安装了 Node.js 运行环境。如果没有安装，可以访问 http://nodejs.org 下载安装。安装云开发 cli 工具 和 React脚手架在配置好 Node...
create-react-app
03-19
create-react-app
create-react-blog:使用create-react-app启动和部署自己的静态呈现的博客
04-13
npx create-react-blog 使用 ， 和创建一个博客。 以盖茨比（Gatsby）的博客创始者和丹·阿布拉莫夫（Dan Abramov）的为主题。 附带： :satellite_antenna: RSS提要生成 :label: 标记的帖子 :rocket: 每个网址HTML文件 :scroll: 平滑滚动到哈希链接 :fire: 动画页面加载过渡 :link: 使用import()轻松拆分代码 :fast-forward_button: 分页索引页 :rescue_worker’s_helmet: TypeScript支持 入门 最简单的入门方法是使用npx ： npx create-react-blog react-blog cd react-blog npm start 如果您想使用TypeScript，只需传入--typescript选项即可： npx create-react-blog react-blog --typescript 另外，您可以自己克隆此存储库，并自己使用其中一个模板。 如果采用这种方法，请确保还运行npm i
React项目中设置publicPath
最新发布
qq_42327090的博客
06-21 288
在React项目的开发与部署过程中，publicPath是一个至关重要的配置项，它决定了项目中的静态资源（如图片、CSS、JS等）从哪里加载。publicPath是Webpack配置中的一个属性，它指定了打包生成的静态资源（如bundle.js、chunk.js等）在部署环境中的基础URL路径。换句话说，它是浏览器请求静态资源时的前缀路径。1、部署灵活性：不同的部署环境（如开发环境、测试环境、生产环境）可能有不同的基路径，通过设置publicPath可以确保在任何环境下资源都能正确加载。
create-react-app创建的项目npm run build之后静态文件找不到
weixin_30797027的博客
04-29 1088
create-react-app创建的项目npm run build之后，运行build中的index.html，什么都没显示，打开浏览器的F12，发现了几个红色的报错，提示几个文件找不到。 查看生成的index.html，发现，里面引用的js和css的路径都是以"/...."开头的。这样写就是绝对路径了，当然找不到。 正常的应该是相对路径，手动把index.html中的引用文件路径...
React静态文件、公共样式、公共方法
前端入门
06-16 2739
React静态文件、公共样式、公共方法一、静态文件1、App.js引入logo2、public目录下二、公共样式三、公共方法 一、静态文件 1、App.js引入logo react脚手架搭建好后，在App.js中引入了logo import logo from './logo.svg'; 使用 <img src={logo} className="App-logo" alt="logo" /> logo.svg图片存放在src目录下 2、public目录下 public目录不会被webpac
React中使用static创建静态属性
独酌101112的博客
08-13 4039
首先明确两个定义： 静态属性：通过构造函数直接访问到的属性。 实例属性：通过new出来的实例，访问到的属性。 接上一个帖子，还是以function和class为例： function Person(name, age){ this.name = name this.age = age } Person.info = 'aaaa' const p1 = new Person('王多多', 18) console.log(p1.info)//undefined console.log(Perso
create-react-app修改为多页面支持的方法
12-03
在本文中，我们将探讨如何将`create-react-app`工作流修改为支持多页面的应用程序。`create-react-app`是React官方提供的一个脚手架，它默认配置了一个单页应用（SPA）的开发环境。但有时我们需要创建有SEO优化的多...
qubix:使用create-react-app创建微前端
04-30
在这样的项目中，我们可以期待找到如“package.json”（定义项目依赖和脚本）、“src”目录（存放源代码）、“public”目录（存放静态资源）、“README.md”（项目说明）以及可能的配置文件（如webpack配置或....
react以create-react-app为基础创建项目
11-30
默认情况下，`create-react-app`隐藏了配置，但可以通过`eject`命令暴露所有配置文件。然而，`eject`操作是不可逆的，意味着一旦执行，项目配置将不再受到`create-react-app`的保护和更新。 如果你不希望`eject`，...
create-react-app:修改和配置手册，并使用create-react-app进行响应
03-13
`public`目录则用于放置静态资源，如HTML文件、图标等。 在默认配置下，`create-react-app`已经集成了Babel和Webpack，用于转换ES6+语法和打包代码。你可以直接使用现代JavaScript特性，无需担心浏览器兼容性问题。...
create-react-fullstack-app：快速构建一个React全栈应用程序
02-04
public　//静态资源包├─.env.development　//开发环境专用环境变量├─.env.production　//生产环境专用环境变量├─.env.test　//测试环境专用环境变量├─.gitignore　//git遗忘文件配置├─.pr
learn-create-react-app:create-react-app原始学习
03-23
`create-react-app` 会处理优化、压缩和版本化静态资源，生成一个可部署的生产版本。 7. **错误和警告** `create-react-app` 提供了一套完整的错误和警告系统，帮助开发者识别并修复潜在问题，如语法错误、性能...
react-cli:create-react-app原始分析
03-24
1. **项目结构**：`create-react-app`生成的项目通常包括`src`目录（存放源代码）、`public`目录（存放静态资源）、`package.json`（项目配置文件）等。 2. **Babel**：Babel是一个JavaScript编译器，用于将ES6+的...
create-react-app-express：CreateExpress服务器用于您的Create React App（cra-universal的骨干网）
02-05
前端部分保持与Create React App的标准结构一致，包括`src`目录下的React组件、`public`目录下的静态资源等。后端部分通常位于`server`目录下，包含Express的设置和路由。 在项目中，你可以使用React进行正常的前端...
React使用公共文件夹public
weixin_39782183的博客
03-09 5034
参考文章 在刚学React/Vue的时候，配合webpack脚手架学习的过程中，碰到一个问题会非常疑惑，比如在React中有个Public文件夹可以放静态资源，但是在src目录中同样有个assets文件夹，这个同样也是放静态资源的，这个就很困惑了，为何放置静态资源的地方会有两个？ 两者区别 其实放在两个文件夹区别就在于是否会被webpack所处理，如果您将文件放入该public文件夹，webp...
react（28）——react脚手架public目录下文件讲解
木子 旭的博客
02-09 2105
目录截图 1.favicon.ico 该文件是浏览器的图标文件，是一个图片 2.index.html 浏览器的主页面，react脚手架上只有一个html文件，页面的转换由转换组件完成 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- 指向public目录下的favicom.ico文件，给该页面设置图标 --> <link
create-react-app 自定义配置文件
黄彪博客
09-23 2058
文章目录文章参考暴露配置文件修改端口号eslintConfig 配置关闭eslint静态资源配置请求代理proxy2.x以上的版本，package.json只能添加字符串 文章参考 create-react-app搭建react项目 暴露配置文件 在工程中执行 npm run eject 删除node_modules文件夹的内容 重新安装依赖，执行npm install 修改端口号 e...
create-react-app : 无法将“create-react-app”项识别为 cmdlet、函数、脚本文件
11-11
但是，当在命令行中运行 "create-react-app" 命令时遇到了 "无法将“create-react-app”项识别为 cmdlet、函数、脚本文件" 的错误提示时，可能有以下几种原因： 1. "create-react-app" 命令没有安装：首先需要确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值