解决create-react-app build 后静态资源文件夹(static)路径不对

最新推荐文章于 2025-01-22 17:10:27 发布
最新推荐文章于 2025-01-22 17:10:27 发布
阅读量1.3w 收藏 1
点赞数 1
分类专栏： React 文章标签： 解决create-react-app build 后静态资源文件夹(s react打包报错 react静态资源路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Chad97/article/details/98729822
版权
本文主要介绍了在使用create-react-app构建项目并build后，静态资源文件夹路径错误的问题。当项目不在根目录下时，服务器无法正确找到资源。解决方案是在package.json中设置`"homepage": "."`，将项目根目录指定为当前目录，从而确保资源路径正确。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Reason

  • 在我们对我们的react项目进行打包上线的时候可能我们的文件夹 build 并不是在更不了下，这样的情况就好出现服务器访问 index 找不到static 下面的资源，仔细看我们会发现访问路径变成了根文件
    例如：
www.test/build/static/cs.css
#  变成
www.test/static/cs.css

因为我们的webpack 默认以项目为根目录

homepage

  • 这时候就要我们制定我们的项目根目录 —— 在package.json中配置 homepage
    "homepage": "."

  "version": "0.1.0",
  "private": true,
  "homepage": ".",
 {
   ...
 }

官方参考文档

create-react-app之部署方式
蛐蛐的博客
01-12 584
1.简介 npm run buildbuild使用应用的生产版本创建目录。 设置您喜欢的HTTP服务器，以便为您网站的访问者提供服务index.html，并向静态路径/static/js/main.<hash>.js等请求提供文件内容/static/js/main.<hash>.js。 2.静态文件服务器 对于使用Node的环境，处理此问题的最简单方法是安装serve并让其处理其余部分： npm install -g serve serve -s ...
前端系列总结-框架篇（1）Create-React-App
a1v0id的博客
07-12 404
前端系列总结-框架篇（1）Create-React-Appcreate-react-app的介绍、安装和使用安装和使用项目的目录结构项目的个性化配置添加项目路径别名接口代理转发在HTML模板中动态插入js文件利用public静态目录插入项目中添加动态的js文件 create-react-app的介绍、安装和使用 create-react-app是React团队推出的一款用于生成react项目的脚手架工具，可以实现零配置开发react的单页面应用。 安装和使用 一般来说都是使用npm全局安装，前提条件是已经配
React使用build生成项目：资源文件路径"/"修改为相对路径"."
热门推荐
amoxu
07-07 2万+
React使用build生成项目：资源文件路径"/"修改为相对路径"."React使用build生成项目：资源文件路径"/"修改为相对路径"."yarn build 指定相对路径拓展为任意构建环境定制环境变量帮助文档 React使用build生成项目：资源文件路径"/“修改为相对路径”." 一直想学习一个前端框架，看中react很久，最近终于对它下手了。在踩了js加载及渲染顺序的坑之后，发布也遇到...
React项目build之后资源文件路径不正确或打开空白页的问题及简易解决方法
大IT职男日志
09-09 3252
找到node_modules -> react-scripts -> config -> paths.js 修改 function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');//改成'....
React基础
最新发布
weixin_43750611的博客
01-22 1427
react入门基础
react最简单的新建方式--Create React App，（附文件路径问题解决的办法）
qq_17451827的博客
02-28 4056
看了react官方文档，看到利用  Create React App 工具是新建react程序最好的方式。1.安装node.js6以上版本2.npm install -g create-react-app3.新建文件夹，在路径下执行create-react-app my-app进入my-app目录执行npm start4.创建之后目录结构为：my-app/ README.md node_m...
【react】脚手架build后，静态页面空白
Voiceu的博客
07-05 1127
有两个原因： 一是打包后的引用路径，是相对路径，在有服务器的情况下，是没有问题的，但是静态网页直接打开就会找不到资源 二是可能使用了BrowserRouter,要改为HashRouter 本人的两个问题都出现了 首先在package.json里面添加 “homepage” ： " . " 其次就是修改Router了 然后再build就行了 ...
react项目打包css引用路径错误
hh3167253066的博客
10-03 1525
使用create-react-app所创建的react项目在build打包之后出现静态资源引用路径有误问题。 解决： 在package.json下面增加"homepage": "."
create-react-app 修改为多入口编译的方法
10-18
path: paths.appBuild, pathinfo: true, filename: 'static/js/[name].bundle.js', chunkFilename: 'static/js/[name].chunk.js', publicPath: publicPath, devtoolModuleFilenameTemplate: info => path ....
React零基础入门到项目实战之脚手架create-react-app搭建React项目
panpan_Yang的博客
08-07 442
脚手架 create-react-app react应用程序 react项目
azure-appservice-static：将静态站点部署到azure AppService
01-29
要将Create React App生成的静态站点部署到Azure App Service，首先需要登录Azure CLI，然后创建一个新的Web应用资源。这可以通过以下命令完成： ```bash az login az group create --name myResourceGroup --...
create-react-app v5 打包配置(部署到非根目录)
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-24 4076
publicPath: 用于指定构建后静态资源在服务器上的路径。base: 用于指定应用程序的根路径，以确保路由可以正确匹配到对应页面。这两个配置项在部署到非根目录时很重要，可以确保应用的资源和路由正常加载和导航。
React 修改打包后静态资源引入路径：资源文件路径“/“修改为相对路径“.“
大白的博客
07-23 1万+
问题：由于部署的时候增加了二级域名，但是打包后的index.html中引入的静态资源路径是从根目录引入的，其实在根域名下并没有这个静态资源，导致引入失败，无法加载，如下图所示 解决办法： 在package.json 里边增加该配置 （当然，配置的地址可以由部署环境决定，可以是 './' , 也可以是 ‘../’,根据需要配置即可） "homepage":".", 修改完成后，打包后的index.html 的引入路径就如下图所示， ...
创建React项目时，出现create-react-app : 无法加载文件问题解决~~~~
qq_16733389的博客
07-06 1251
问题描述： create-react-app : 无法加载文件 C:\Users\cxk\AppData\Roaming\npm\create-react-app.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参 阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 我们打开Windows PowerShell 并且以管理员身份运行 打开了命令行之后,输入set-Exec
create-react-app 修改build后生成的路径问题
chenxyb的博客
04-28 7846
create-react-app 作为官网推荐的脚手架，一直受到人们追捧，但是在打包上线时，build目录下，所有地址都会生成为相对地址，如何修改生成路径呢？只需两步：一、运行npm run ejecteject是不可逆的。注：若是安装了yarn。也可以运行yarn eject二、在config目录下找打paths.js这个文件修改37行为：envPublicUrl || (publicUrl ?...
创建react项目遇到create-react-app : 无法加载文件 C:\Users\Tangsz\AppData\Roaming\npm\create-react-app.ps1
qq_66180056的博客
06-27 753
创建react项目遇到create-react-app : 无法加载文件 C:\Users\Tangsz\AppData\Roaming\npm\create-react-app.ps1
React 配置文件(-)
qqqqqqqq188的专栏
12-30 505
React 基本配置
react中static的配置
negel_xu的博客
11-01 1584
react 打包static相关设置
React项目build之后资源文件路径 问题解决 背景图片
Elementsboy的博客
06-07 629
React项目build之后资源文件路径 问题解决 背景图片 1. 找到node_modules -> react-scripts -> config -> paths.js 修改 function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); const servedUrl = envPublicUrl || (publicUrl ? url.parse(
create-react-app 使用 webpack-bundle-analyzer
01-06
`create-react-app` 是一个用于快速搭建 React 应用程序的脚手架工具，它默认使用了现代 JavaScript 模块打包工具，如 Rollup 或者 terser 等。Webpack 是一个广泛使用的前端构建工具，它负责模块打包、优化和加载。 当你想要分析 `create-react-app` 构建后的 bundle（文件大小和模块依赖关系）时，Webpack-Bundle-Analyzer 是一个非常有用的插件。这个插件可以在构建完成后生成交互式的报告，帮助开发者理解应用的性能，找出可以优化的部分，比如检查是否存在大的库被重复引入，或者是哪些模块占用过多的体积。 要在 `create-react-app` 中集成 `webpack-bundle-analyzer`，你需要手动配置一下。首先，在项目根目录下安装 `webpack-bundle-analyzer` 和它的 CLI： ```bash npm install --save-dev webpack-bundle-analyzer ``` 然后，在 `config/webpack.config.dev.js` 或 `config/webpack.config.prod.js` 文件中添加对 Bundle Analyzer 的支持，并在构建命令后运行它。例如： ```javascript // config/webpack.config.dev.js module.exports = { // ... plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false, // 默认为false，如果你想在构建后自动打开浏览器查看分析结果，可以设置为true reportFilename: 'report.html', // 报告输出文件名 generateStatsFile: true, statsFilename: 'stats.json', // 统计信息输出文件名 logLevel: 'info', cache: false, }), ], }; ``` 最后，在命令行中构建应用并运行分析： ```bash npx react-scripts build webpack-bundle-analyzer stats.json report.html ``` 这将生成一个名为 `report.html` 的静态 HTML 文件，你可以在这个页面上看到详细的 bundle 分析报告。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值