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 ...
随机推荐
- leetcode23
public class Solution { public ListNode MergeKLists(ListNode[] lists) { var ary = new List<int> ...
- 【Noip模拟 20160929】花坛迷宫
题目描述 圣玛格丽特学园的一角有一个巨大.如迷宫般的花坛.大约有一个人这么高的大型花坛,做成迷宫的形状,深受中世纪贵族的喜爱.维多利加的小屋就坐落在这迷宫花坛的深处.某一天早晨,久城同学要穿过这巨大的 ...
- Maven项目中遇到的问题及其解决方案
Maven中pom报红 1.jdk版本是否符合要求? 2.maven的本地confg中的setting.xml中是否和要求的jdk版本一致? 3.maven本地仓库路径是否正确,即为自己的确定的仓库位 ...
- cut命令详解
1.简介:cut:以某种方式按照文件的行进行分割 2.参数列表: -b:仅显示行中指定直接范围的内容: -c:仅显示行中指定范围的字符: -d:指定字段的分隔符,默认的字段分隔符为“TAB”: -f: ...
- java正则表达式 需要转义的字符
特别字符 说明 $ 匹配输入字符串的结尾位置.如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 ‘\n' 或‘\r'.要匹配 $ 字符本身,请使用 \$. ( ) 标记一个子 ...
- 动画优化、客户端存储、历史记录、worker
一.requestAnimationFrame 1.requestAnimationFrame怎么用? 设置关键帧动画效果,注重关键帧执行的情况,用法与setTimeout一样 2.requestAn ...
- 监测SQLServer数据库中表的数据变化 方案
sqlDependency提供了这样一种能力:当被监测的数据库中的数据发生变化时,SqlDependency会自动触发OnChange事件来通知应用程序,从而达到让系统自动更新数据(或缓存)的目的. ...
- mysql学习笔记--数据库单表查询
一.查询语句 1. select [选项] 列名 [from 表名] [where 条件] [order by 排序] [group by 分组] [having 条件] [limit 限 ...
- C#之SByte
int8 C#中,byte为无符号8位整数,而Sbyte为有符号8位整数,对应java中的byte类型. 方法一将 byte 转为 sbyte.原理很简单,就是当 byte 小于 128 时其值保持不 ...
- AppleID的双重认证
[链接]AppleID的双重认证https://support.apple.com/zh-cn/HT204915