用create-react-app脚手架搭建的react项目 使用 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了

报错为:

手动更改index.html的路径之后又报静态资源引入错误

把 

改为

这时候报错为:

解决方法很简单:

找到myapp目录config文件夹下面  paths.js

大约在37行左右  (这是在2017-12-23新建的react项目生产的配置文件)

修改为以下代码

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
  envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
  return ensureSlash(servedUrl, true);
}

函数圈住是修改路径

END

react.js - 基于create-react-app的打包后文件根路径修改的更多相关文章

  1. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  2. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  3. webpack减少打包后文件体积的几种方法

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  4. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  5. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  6. .2-浅析webpack源码之打包后文件

    先不进源码,分析一下打包后的文件,来一张图: 首先创建两个JS文件,内容如下: // config.js module.exports = { entry: './input.js', output: ...

  7. 基于create-react-app的打包后文件路径问题

    改绝对路径为相对路径. https://segmentfault.com/q/1010000009672497直接在package.json里加 "homepage":" ...

  8. 如何修改Vue打包后文件的接口地址配置

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...

  9. 解决Vue打包后背景图片路径错误问题

    1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...

随机推荐

  1. onload、DOMContentLoaded与性能问题

    onload.DOMContentLoaded与性能问题 onload事件 DomContentLoaded   1.onload事件 onload事件一般在所有的文档内容加载完成后触发,如果网页中图 ...

  2. lvs学习笔记

    本人身为一个网工,最近一直在工作中学习linux的相关知识.前短时间通过自查资料学习了lvs的相关内容,摘录部分整理后和大家分享,内容较多,较琐碎,望见谅!!! LVS 从Linux内核版本2.6起, ...

  3. Ubuntu & Docker & Consul & Fabio & ASP.NET Core 2.0 微服务跨平台实践

    相关博文: Ubuntu 简单安装 Docker Mac OS.Ubuntu 安装及使用 Consul Consul 服务注册与服务发现 Fabio 安装和简单使用 阅读目录: Docker 运行 C ...

  4. 30.Linux-RTC驱动分析及使用

    linux中的rtc驱动位于drivers/rtc下,里面包含了许多开发平台的RTC驱动,我们这里是以S3C24xx为主,所以它的RTC驱动为rtc-s3c.c 1.进入./drivers/rtc/r ...

  5. Duilib XML嵌套

    duilib使用嵌套xml可以简化代码的书写,有利于模块化的页面布局分解,duilib库的xml嵌套主要有两种方式 方式一.以创建控件的方式嵌套xml 在CreateControl(LPCTSTR p ...

  6. python进阶------进程线程(五)

    Python中的IO模型 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别 ...

  7. pt-online-schema-change和默认值关系

    在使用pt-online-schema-change会遇到如下的错误导致表修改失败: Copying rows caused a MySQL error 1364,Message: Field 'XX ...

  8. Api管理工具(spring-rest-docs)

    对于app开发来说,必须需要有相应的api文档,一般最基础的就是用markdown工具来撰写api文档.当对于开发人员来说,是总会想着寻找更方便撰写,测试,对接前端开发的文档生成的工具. 其实这方面的 ...

  9. 史上最强学生管理系统之ArrayList版

    其实不管是网上或者培训班,都会有学生管理系统的最基础版本,本人也不过是照猫画虎,在某些细节方面进行了一些渲染,使这个最基本的小程序更加人性化和便于利于操作一点,个人愚见,大牛勿喷,欢迎转载(请注明出处 ...

  10. bootstrap栅格布局学习历程

    了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...