react.js - 基于create-react-app的打包后文件根路径修改
用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的打包后文件根路径修改的更多相关文章
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大
从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...
- webpack减少打包后文件体积的几种方法
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- vue项目 webpack打包后,图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...
- .2-浅析webpack源码之打包后文件
先不进源码,分析一下打包后的文件,来一张图: 首先创建两个JS文件,内容如下: // config.js module.exports = { entry: './input.js', output: ...
- 基于create-react-app的打包后文件路径问题
改绝对路径为相对路径. https://segmentfault.com/q/1010000009672497直接在package.json里加 "homepage":" ...
- 如何修改Vue打包后文件的接口地址配置
1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
- 解决Vue打包后背景图片路径错误问题
1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...
随机推荐
- 初入servlet:Allocate exception for servlet
老板,来一碗错误垫垫肚子! 如果以下几个错误都符合,估计就是这个原因了. 页面报错如下: java.lang.NoClassDefFoundError:IllegalName: firstDemo/T ...
- 深入分析Android动画(二)
上回书说到Android动画的分类以及基本使用,这会书主要说Android属性动画的原理,对于View动画的原理本篇不做深入分析.对于Android动画的基础请看深入分析Android动画(一) 我们 ...
- 阿里云centos配置postfix
1. 为了防止垃圾邮件,先到域名控制面板设置好. MX A 记录及TXT记录 其中TXT记录如下 @ spf1 a mx ~all 意思就是使用spf1协议,允许a记录和MX记录对应的IP,不允许 ...
- c#3.0提供的扩展方法
在c#3.0之前,想要为内置的类型添加一个方法显然是不可能的.但是,c#3.0提供的扩展方法可以解决这个问题.具体代码如下: public static class ExtendedClass {pu ...
- Json字符串解析原理、超大json对象的解析
概述 附上完整的代码:https://pan.baidu.com/s/1dEDmGz3(入口类是Json)JSON:JavaScript 对象表示法(JavaScript Object Notatio ...
- .Net 多线程开发优化实践
互联网产品中微服务.高并发已经成为最基本的要求.所谓高并发就是在同一时刻处理多个服务请求.为了提高高并发场景下的系统稳定性,负载均衡.消息队列等框架和技术应运而生,有效的缓解了高并发对系统整体压力.无 ...
- robotframework自动化系列:删除操作流程以及总结
之前已经完成了登录.新增和修改的操作流程,这一节主要说明删除操作流程以及自动化的过程中出现的问题,算是对这个项目自动化的一个总结. 删除操作流程 对于系统账号管理中删除功能,删除的测试点主要如图所示 ...
- IDEA安装步骤详解
IDEA开发工具是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具(git.svn.github ...
- enote笔记法(2)——why的使用
章节:why的使用 用法: why 概念|词汇(比概念更一般的形式的keyword)|短语|句子 用法1: why 概念|why keyword([比概念更一般的形式的keyword]) “why 概 ...
- PyCharm教程
1.PyCharm3.0默认快捷键 2.PyCharm默认模板设置 3.字体设置 1.PyCharm3.0默认快捷键(翻译的)PyCharm Default Keymap 1.编辑(Editing) ...