create-react-app创建的项目npm run build之后,运行build中的index.html,什么都没显示,打开浏览器的F12,发现了几个红色的报错,提示几个文件找不到。

查看生成的index.html,发现,里面引用的js和css的路径都是以 "/...." 开头的。这样写就是绝对路径了,当然找不到。

正常的应该是相对路径,手动把index.html中的引用文件路径最开始的“/”符号挨个去掉,刷新页面果然成功显示了。

但总不能每次build以后都手动修改吧。

正确的修改方式在下面:

找到根目录下config文件夹里面的paths.js文件,找到以下这个函数。其中的 '/' 改为 './' 即可

function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
return ensureSlash(servedUrl, true);
}

修改完以后,重新运行npm run build,就发现正常了。

create-react-app创建的项目npm run build之后静态文件找不到的更多相关文章

  1. linux vue项目+npm run build + nginx

    系统 环境 vue   nginx 步骤 1.打包vue项目 2.配置nginx 打包vue项目 1.项目配置   我们使用服务器的8000端口 2.打包 # npm run build 打包成功会创 ...

  2. VUE项目 npm run build卡住不动,也不报错

    npm config set registry http://registry.cnpmjs.org try again npm run build 居然能动了....

  3. 在vue项目npm run build后,index.html中引入css和js 报MIME type问题

    问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...

  4. vue-cli项目npm run build后,index.html无法在浏览器打开

  5. vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

    问题: 就是 bulid 打包后,想本地看看效果,本地看不了.... 网上看到一个....   具体更多在: http://www.dabaipm.cn/static/frontend/346.htm ...

  6. vue脚手架初始化的项目 npm run build 无效,没有反应

    找到build文件夹的check-versions文件,注释掉如图所以代码即可.

  7. 创建Django项目时,settings的静态文件的配置

    STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static'), )

  8. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  9. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

随机推荐

  1. python大法好——装饰器、生成器、迭代器

    1.装饰器 1. 不能修改被装饰的函数的源代码  2. 不能修改被装饰的函数的调用方式 实现装饰器知识储备: 1 函数即“变量” 2 高阶函数     a:把一个函数名当做实参传给另外一个函数(不修改 ...

  2. HTTP协议规定,客户端的编写

    HTTP协议是网络应用层协议,建立在TCP/IP协议基础上.HTTP协议基于客户/服务器模式,客户端主动发出HTTP请求,服务器接收HTTP请求,返回HTTP响应结果.HTTP协议对HTTP请求,以及 ...

  3. 一个free异常引发的异常

    有同事反馈说自己的线程不工作,查看堆栈发现其打印如下: # # # # # # # # , info= # <signal handler called> # # # # # # # , ...

  4. CDialogEx::OnPaint()的问题,或者为什么在对话框程序的OnPaint中绘图无效的问题

    这是一个基于对话框的程序,对话框上有按钮,还有几个CStatic用来绘图,之前都是好好的,今天改成Unicode版本后,编译正常,运行时CStatic中的图像怎么也不显示,有时候会闪现一次就消失,问题 ...

  5. JS数组存储(两个数组相等,一个改变,另一个跟着改变)

    数组是一种引用数据类型,数组引用变量只是一个引用,数组元素和数组变量在内存里是分开存放的实际的数组元素被存储在堆(heap)内存中:数组引用变量是一个引用类型的变量,被存储在栈(stack)内存中. ...

  6. 数组中出现次数超过一半的数字(python)

    题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  7. Pandas.Series.dt.dayofweek相关命令

  8. kalman滤波(二)---扩展kalman滤波[EKF]的推导

    一.状态估计的解释 我们知道每个方程都受噪声的影响,这里把位姿x和路标y看成服从某种概率分布的随机变量.因此我们关心的问题就变成了:当我们已知某些运动数据u和观测数据z时,如何确定状态量x,y的分布? ...

  9. CRM中QueryDict和模型表知识补充

    CRM中QueryDict和模型表知识补充 1.QueryDict的用法 request.GET的用法:1.在页面上输入:http://127.0.0.1:8000/index/print(reque ...

  10. Netsharp总体介绍

    作者:秋时   日期:2014年02月05日   转载须说明出处  Netsharp交流群:338963050(请有详细的请求说明) Netsharp系列文章目录结构 Netsharp是一款免费的基于 ...