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. Python3执行DOS命令并截取其输出到一个列表字符串,同时写入一个文件

    #执行DOS命令并截取其输出到一个列表字符串,同时写入一个文件#这个功能很有用listing=os.popen('ipconfig').readlines()for i in listing: pri ...

  2. 给tomcat配置外部资源路径(应用场景:web项目访问图片视频等资源)

    对于一个web项目来说,除了文字之外,图片,视频等媒体元素也是其重要的组成部分.我们知道,web项目中如果用到大量的图片.视屏的资源,我们 通常的做法是只在数据库中存储图片.视频等资源的路径,web项 ...

  3. python3安装xadmin出现 UnicodeDecodeError: 'gbk' codec can't decode byte 0xa4 in position 3444: illegal multibyte sequence

    python3的环境安装xadmin时,直接pip install xadmin出现 Downloading xadmin-0.6.1.tar.gz (1.0MB) 100% |███████████ ...

  4. vue 初始化data中的数据

    Object.assign(this.$data, this.$options.data());

  5. AngularJS学习笔记(一)

    一.基本指令 1.ng-app=" " 指令初始化一个 AngularJS 应用程序,定义angularJS的使用范围; tips:一个页面里创建多个 ng-app 手动加载即可: ...

  6. 171. Excel Sheet Column Number (Math)

    Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...

  7. IIC基本概念和基本时序

    1. IIC基本概念和基本时序 1.1 I2C串行总线概述 I2C总线是PHLIPS公司推出的一种串行总线,是具备多主机系统所需的包括总线裁决和高低速器件同步功能的高性能串行总线. 1.I2C总线具有 ...

  8. tp3.2 phpexcel 简单导出多个sheet(execl表格)

    参考链接:https://blog.csdn.net/u011341352/article/details/70211962 以下是公共类PHPExcel.php文件: // 开始 <?php/ ...

  9. Linux的php-fpm优化心得-php-fpm进程占用内存大和不释放内存问题(转)

    原文地址:https://wzfou.com/php-fpm/ 最近发现博客的内存老是隔三差五地被“吃掉”了,登录到后台后偶尔会出卡顿的情况,一开始怀疑是Swap不够导致的,于是给VPS主机增加了几个 ...

  10. Linux系统中的tar命令

    时间一长什么东西都容易忘记,尤其是一些不常用的东西忘记的更快,所以避免忘记,就记录下来,可以方面使用的时候查询.Tar命令在linux系统中算是一个比较重要的命令,今天就针对该命令进行总结一下. 1. ...