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. 如何查看java的class文件

    1.首先拿到javac文件 例如:test.class 2.可以使用文本编辑器用二进制的方式打开() cafe babe 0000 0034 0056 0a00 1200 3209 0010 0033 ...

  2. .NET MVC 控制器和行为

    行为就是可访问方法(public) 行为返回类型必须是 ActionResult 或者其派生类,基本上返回类型为以下四种之一 View(视图路径) Json(对象或者对象集合) Content(字符串 ...

  3. OS模块的介绍

    os,语义为操作系统,模块提供了访问多个操作系统服务的功能,可以处理文件和目录这些我们日常手动需要做的操作.os和它的子模块os.path还包括一些用于检查.构造.删除目录和文件的函数,以及一些处理路 ...

  4. jmeter 连接 MySql

    1.连接 mysql 驱动包安装下载 1)首先需要安装 mysql 驱动包,下载地址:https://dev.mysql.com/downloads/connector/j/5.1.html 2)下载 ...

  5. ie7ajax 跨域 no transport 解决办法

    客户端js <script src="jquery-1.8.0.min.js"></script> <script src="JavaScr ...

  6. cdnbest的proxy里api用法案例:

    用户的proxy帐号里api key要设置好,那个key设置后是不显示的,但会显示已设置 key是自已随便生成的 $uid = 22222; $skey = 'langansafe&*#'; ...

  7. linux 磁盘空间被占满但找不到目标文件的问题处理 lsof命令

    lsof简介 在终端下输入lsof即可显示系统打开的文件,因为 lsof 需要访问核心内存和各种文件,所以必须以 root 用户的身份运行它才能够充分地发挥其功能. 直接输入lsof部分输出为: 每行 ...

  8. 【读书笔记】深入应用C++11代码优化与工业级应用 读书笔记01

    第一章 使用C++11让程序更简洁.更现代 1.1  类型推导 1.1.1  auto类型推导 1.auto关键字的新意义 不同于python等动态类型语言的运行时进行变量类型的推导,隐式类型定义的类 ...

  9. node.js中 koa 框架的基本使用方法

    一.安装 koa npm install koa --save 二.简单使用 const koa = require('koa'); //注意使用koa需要new,跟express有点不同 let a ...

  10. 32.Mysql Cluster

    32.Mysql Cluster Cluster是一组节点的组合.节点分为数据节点.SQL节点.管理节点.节点组合在一起可以为应用提供高可用.高性能.可缩放的Cluster数据管理.数据节点使用NDB ...