用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. mysql别名的使用

    在项目中遇到别名的问题,抽时间整理了一下 在sql中,合理的使用别名可以让sql更容易写并且提高可读性.别名使用 as 来表示,可以分为表别名和列别名. 别名应该是先定义后使用才对,所以首先要了解sq ...

  2. return flase 作用

    调用return false的时候,他实际上做了三件事   event.preventDefault();     禁止默认行为   event.stopPropagation();   阻止冒泡   ...

  3. Ubuntu 共享 转载

    Ubuntu 14.04 文件服务器--samba的安装和配置 听语音 | 浏览:29526 | 更新:2014-10-10 22:28 | 标签:ubuntu 1 2 3 4 5 6 7 分步阅读 ...

  4. Java Enum用法详解

    Java Enum用法详解 用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举 ...

  5. gulp一般使用

    gulp的基本使用总结了一下几点: 1.gulp-ejs的使用 [ file include,html文件合并 ]: let ejs = require("gulp-ejs"); ...

  6. Pycharm,Python原生IDE?

    老套路,安装和使用(Win7x64.JDK神马滴早已装好). 1.安装 网上下下来后就这东西 Next D盘路径 我选择.我喜欢 开装 好慢,以后用光纤 O了 桌面小图标 2.使用 以管理员身份打开软 ...

  7. Debian6单用户模式

    开始的时候按"e"进入Grub的编辑界面,这个时候要找:linux /boot/vmlinuz-2.6.32-5-amd64 root=UUID=.......... ro qui ...

  8. linux学习笔记二

    进程(process)是程序实体运行的过程,是系统进行资源分配和调度的独立单位,或者说是一个程序在处理机上的一次执行活动. 区分一下进程和程序 1.0 程序是一个静态指令的集合:而进程是一个程序的动态 ...

  9. hiero_v2.0的下载安装和使用

    程序地址:http://www.n4te.com/hiero/hiero.jnlp http://slick.cokeandcode.com/demos/hiero.jnlp(目测该网址需翻*墙才能进 ...

  10. 【机器学习】人工神经网络ANN

    神经网络是从生物领域自然的鬼斧神工中学习智慧的一种应用.人工神经网络(ANN)的发展经历的了几次高潮低谷,如今,随着数据爆发.硬件计算能力暴增.深度学习算法的优化,我们迎来了又一次的ANN雄起时代,以 ...