create-react-app创建的项目npm run build之后静态文件找不到
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之后静态文件找不到的更多相关文章
- linux vue项目+npm run build + nginx
系统 环境 vue nginx 步骤 1.打包vue项目 2.配置nginx 打包vue项目 1.项目配置 我们使用服务器的8000端口 2.打包 # npm run build 打包成功会创 ...
- VUE项目 npm run build卡住不动,也不报错
npm config set registry http://registry.cnpmjs.org try again npm run build 居然能动了....
- 在vue项目npm run build后,index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
- vue-cli项目npm run build后,index.html无法在浏览器打开
- vue-cli构建项目 npm run build后应该怎么运行在本地查看效果
问题: 就是 bulid 打包后,想本地看看效果,本地看不了.... 网上看到一个.... 具体更多在: http://www.dabaipm.cn/static/frontend/346.htm ...
- vue脚手架初始化的项目 npm run build 无效,没有反应
找到build文件夹的check-versions文件,注释掉如图所以代码即可.
- 创建Django项目时,settings的静态文件的配置
STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static'), )
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
随机推荐
- Spring中AOP主要用来做什么。Spring注入bean的方式。什么是IOC,什么是依赖注入
Spring中主要用到的设计模式有工厂模式和代理模式. IOC:Inversion of Control控制反转,也叫依赖注入,通过 sessionfactory 去注入实例:IOC就是一个生产和管理 ...
- 如何学习DeepLearning
多年来,科学家们为了搞清楚神经网络的运行机制,进行了无数次实验.但关于神经网络的内在运行方式,目前还没有系统性的理论,没有具体的路线可以指引你获得更好的性能.简单地下载开源工具包直接使用并不能跑出很棒 ...
- mybatis泛型(一)
mybatis的确很方便,可以随意配置sql语句,并根据参数生成指定的sql,也可以根据查询结果生成指定对象 但是有一点非常恐怖,就是每个数据库表都必须有一个配置,等于在一个系统里做了很多重复的工作, ...
- C++ 下面的AIDL
转自https://android.googlesource.com/platform/system/tools/aidl/+/brillo-m10-dev/docs/aidl-cpp.md. Bac ...
- Javascript面试题收集
第一部分“ 来源: http://bbs.miaov.com/forum.php?mod=viewthread&tid=6974 1.var a = b = 1; ——这样定义变量的隐患 fu ...
- .Net 中读写Oracle数据库常用两种方式
.net中连接Oracle 的两种方式:OracleClient,OleDb转载 2015年04月24日 00:00:24 10820.Net 中读写Oracle数据库常用两种方式:OracleCli ...
- cdnbest如何让用户访问走最近最快的线路(分组线路)
用户访问网站有时网络有互通的问题,cdnbest的分组解析可以细分线路,让用户访问自动走最优线路,线路不细分都加默认里,访问的节点是随机分配的 下面我们讲下如何设置: 比如你有电信,移动,和国外的节点 ...
- Zabbix告警脚本-短信
[root@iot-svndata02 bin]# cat zbsms.sh #!/bin/sh #curl http://221.179.180.137:8080/smsaServer/lkSend ...
- Curator场景应用
分布式锁功能: 在分布式场景中,我们为了保证数据的一致性,经常在程序运行的某一个点,需要进行同步操作,(java提供synchronized或者Reentrantlock实现), 使用curator基 ...
- vue上线后,背景图片路径错误
build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...