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. leetcode23

    public class Solution { public ListNode MergeKLists(ListNode[] lists) { var ary = new List<int> ...

  2. 【Noip模拟 20160929】花坛迷宫

    题目描述 圣玛格丽特学园的一角有一个巨大.如迷宫般的花坛.大约有一个人这么高的大型花坛,做成迷宫的形状,深受中世纪贵族的喜爱.维多利加的小屋就坐落在这迷宫花坛的深处.某一天早晨,久城同学要穿过这巨大的 ...

  3. Maven项目中遇到的问题及其解决方案

    Maven中pom报红 1.jdk版本是否符合要求? 2.maven的本地confg中的setting.xml中是否和要求的jdk版本一致? 3.maven本地仓库路径是否正确,即为自己的确定的仓库位 ...

  4. cut命令详解

    1.简介:cut:以某种方式按照文件的行进行分割 2.参数列表: -b:仅显示行中指定直接范围的内容: -c:仅显示行中指定范围的字符: -d:指定字段的分隔符,默认的字段分隔符为“TAB”: -f: ...

  5. java正则表达式 需要转义的字符

    特别字符 说明 $ 匹配输入字符串的结尾位置.如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 ‘\n' 或‘\r'.要匹配 $ 字符本身,请使用 \$. ( ) 标记一个子 ...

  6. 动画优化、客户端存储、历史记录、worker

    一.requestAnimationFrame 1.requestAnimationFrame怎么用? 设置关键帧动画效果,注重关键帧执行的情况,用法与setTimeout一样 2.requestAn ...

  7. 监测SQLServer数据库中表的数据变化 方案

    sqlDependency提供了这样一种能力:当被监测的数据库中的数据发生变化时,SqlDependency会自动触发OnChange事件来通知应用程序,从而达到让系统自动更新数据(或缓存)的目的. ...

  8. mysql学习笔记--数据库单表查询

    一.查询语句 1.  select [选项] 列名 [from 表名]  [where 条件]  [order by 排序]  [group by 分组]  [having 条件]  [limit 限 ...

  9. C#之SByte

    int8 C#中,byte为无符号8位整数,而Sbyte为有符号8位整数,对应java中的byte类型. 方法一将 byte 转为 sbyte.原理很简单,就是当 byte 小于 128 时其值保持不 ...

  10. AppleID的双重认证

    [链接]AppleID的双重认证https://support.apple.com/zh-cn/HT204915