React杂篇(1) -- 打包发布注意事项
打包后资源路径
问题:直接打包会出现一下情况:
方式一:
package.json文件下加入homepage
字段
{
"name": "wap-v2",
"version": "0.1.0",
"private": true,
"homepage": "./", //加上此句即可
"dependencies": {...}
}
方式二:
webpack相关 -> config/paths.js
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : ‘./’); // 配置文件跟路径’/’ 修改这里
return ensureSlash(servedUrl, true);
}
体积优化
项目的体积优化也很重要,开发时的按需加载,模块化分割这里就不多说了。
打包时,会生成一系列的.map文件,占的体积非常大。
webpack相关 -> webpack.config.prod.js
devtool: shouldUseSourceMap ? 'source-map' : false,
//变为
devtool: false,
无报错但空白页
经过上面的配置与修改心想这下总该没事了吧!
然而事实可能不同:
HashRouter与BrowserRouter的异同
项目中控制路由跳转使用的是BrowserRouter。
在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的,就像上面。
原因:
在browserHistory 模式下,URL 是指向真实 URL 的资源路径,当通过真实 URL 访问网站的时候,由于路径是指向服务器的真实路径,但该路径下并没有相关资源,所以用户访问的资源不存在。
解决
将BrowserRouter
改为 HashRouter
上面文档并不完善,之后有时间再添加或更改。
React杂篇(1) -- 打包发布注意事项的更多相关文章
- react build 后打包发布总结
一,部署在apache web服务器上(wamp | xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决. 设置A ...
- word加载项打包发布注意事项总结
最近在做一个word加载项,发布的时候还是有很多坑的现在总结一下:发布工具为Advanced Installer 11.0 网盘地址:http://pan.baidu.com/s/1i4GK3g5 1 ...
- RN在Android打包发布App
参考资料:http://www.jianshu.com/p/b8811669bcb6 RN在Android打包发布App 1-:生成一个签名密钥你可以用keytool命令生成一个私有密钥.在Windo ...
- 快速构建Windows 8风格应用37-常见发布注意事项
原文:快速构建Windows 8风格应用37-常见发布注意事项 引言 通常我们发布Windows Store应用失败后,会返回一些错误需要我们去修改.我之前在给学生做培训的时候发现大部分同学应用被打回 ...
- React项目的打包
1.create-react-app 来自Facebook官方的零配置命令行工具.create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+E ...
- React项目的打包与部署到腾讯云
腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法.项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题.下面来具体梳理下: create-react-app 来自F ...
- React-Native之打包发布(Android)
React-Native之打包发布(Android) 一,介绍与需求 移动端打包发布到应用市场 二,发布配置 注意:以下所有操作都在win10下进行,React Native版本0.59.5,andr ...
- 服务器(Liunx)打包发布java web工程
Liunx服务器上打包发布web工程(开发工具Idea) 1.首先使用Idea自带的打包功能(点击package打包) 2.然后链接到服务器(我这里用的是Xshell链接工具) 3.将打好的war包传 ...
- Unity3D引用dll打包发布的问题及解决
今年我们开始使用Unity3D开发MMORPG,脚本语言使用C#,这样我们就可以使用以往积累的许多类库.但是,在U3D中使用.NET dll的过程并不是那么顺利,比如我们今天遇到的这种问题. 一.问题 ...
随机推荐
- ARM-Linux移植之(四)——根文件系统构建
相关工具版本: busybox-1.7.0 arm-linux-4.3.2 linux-2.6.22 1.配置busybox并安装. 在我们的根文件系统中的/bin和/sbin目录下有各种命令的应 ...
- Linux机器工作环境安装
安装gcc编译器: yum -y install gcc 安装wget: yum -y install wget 安装python-setuptools: wget http://peak.telec ...
- 【树莓派】RASPBIAN镜像初始化配置
[树莓派]如何烧录镜像详细版 接上一节,系统已经烧录完毕了,将其放置于树莓派然后运行起来 我是直接接显示器了,若有需要转接头的自行淘宝搜索购买~~电源使用的是5V 2.5A的 首次开机会时间较长 且有 ...
- 华为部分真机调试无法显示log问题解决
真机测试时,部分华为手机无法获取全部的log信息.或者说无法获取Error以下级别的log信息.比如P7 这是因为部分华为机出厂默认log设置为关闭状态,因此只能获取Error以上级别的log信息.蛋 ...
- CSS中盒子垂直居中的常用方法
在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中相对来说是比较复杂一些的.下面 ...
- Hbase 一次表异常,有一张表 无法count scan 一直显示重连
z_activeagent z_weekstore z_wstest zz_monthstore row(s) in 0.5240 seconds => ["KYLIN_02YJ3NJ ...
- 一篇文章让你了解并掌握memcached
第一章 memcached简介 1.1为什么引入memcached 随着数据量的增大,访问的集中,REBMS负担加重,数据库响应恶化. Memcached是高性能的分布式内存缓存服务器,目的是通过缓存 ...
- OSCache-JSP页面缓存(1)
一.OSCache提供的缓存标签 这是OSCache提供的标签库中最重要的一个标签,包括在标签中的内容将应用缓存机制进行处理,处理的方式将取决于编程者对cache标签属性的设置. 第一次请求到达时,标 ...
- 运单waybill快速录入
运单waybill快速录入 前台页面: 1修改页面onAfterEdit事件, 后台代码:ajax响应回请求1 为成功,0 为失败
- 关于ptrdiff_t
整除.opencv中的内存一般是通过malloc分配,不能保证都是都能被16整除,此时需要截断,但是剩下的内存要如何维护? CV2.0的这样维护的:在 malloc 是多申请一个指针的空间,这个指针指 ...