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. react portals

    来源:https://segmentfault.com/a/1190000011668286 Portals是react 16.3 提供的官方解决方案,使得组件可以脱离父组件层级挂载在DOM树的任何位 ...

  2. iphone 开发h5 踩过的坑

    html,body{ -webkit-text-size-adjust: none; }  // 当需要在中文版chrome浏览器中显示小于12px的字体时,而且此时页面放大效果会被阻止 html,b ...

  3. LevelDB源码分析-MemTable

    MemTable(db/memtable.h db/memtable.cc db/skiplist.h) LevelDB中存储在内存中的那部分KV数据都存储在memtable中,而memtable中的 ...

  4. PXC 搭建高可用集群

    (1).PXC集群注意事项 1.PXC集群只支持innodb引擎 2.

  5. 使用JS读取本地文本文件(兼容各种浏览器)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. day43 多表查询和pymysql

    复习 增删改查全语法 # 增 insert into db1.t1(字段2, 字段1, ..., 字段n)|省略 values (值2, 值1, ..., 值n)|(值1, 值2, ..., 值n)[ ...

  7. ELK填坑总结和优化过程

    做了几周的测试,踩了无数的坑,总结一下,全是干货,给大家分享~ 一.elk 实用知识点总结 1.编码转换问题(主要就是中文乱码) (1)input 中的codec => plain 转码 cod ...

  8. spring整合mybatis在使用.properties文件时候遇到的问题

    在spring里使用org.mybatis.spring.mapper.MapperScannerConfigurer 进行自动扫描的时候,设置了sqlSessionFactory 的话,可能会导致P ...

  9. [leetcode]77. Combinations组合

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...

  10. Linux下Mysql安装(RPM安装)

    1. 首先检查机器里是否已经存在MySQL $ rpm -qa | grep mysql 2. 去官网下载相应的rpm包:https://dev.mysql.com/downloads/mysql/ ...