打包后资源路径

问题:直接打包会出现一下情况:

方式一:

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) -- 打包发布注意事项的更多相关文章

  1. react build 后打包发布总结

    一,部署在apache  web服务器上(wamp   |   xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决.  设置A ...

  2. word加载项打包发布注意事项总结

    最近在做一个word加载项,发布的时候还是有很多坑的现在总结一下:发布工具为Advanced Installer 11.0 网盘地址:http://pan.baidu.com/s/1i4GK3g5 1 ...

  3. RN在Android打包发布App

    参考资料:http://www.jianshu.com/p/b8811669bcb6 RN在Android打包发布App 1-:生成一个签名密钥你可以用keytool命令生成一个私有密钥.在Windo ...

  4. 快速构建Windows 8风格应用37-常见发布注意事项

    原文:快速构建Windows 8风格应用37-常见发布注意事项 引言 通常我们发布Windows Store应用失败后,会返回一些错误需要我们去修改.我之前在给学生做培训的时候发现大部分同学应用被打回 ...

  5. React项目的打包

    1.create-react-app 来自Facebook官方的零配置命令行工具.create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+E ...

  6. React项目的打包与部署到腾讯云

    腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法.项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题.下面来具体梳理下: create-react-app 来自F ...

  7. React-Native之打包发布(Android)

    React-Native之打包发布(Android) 一,介绍与需求 移动端打包发布到应用市场 二,发布配置 注意:以下所有操作都在win10下进行,React Native版本0.59.5,andr ...

  8. 服务器(Liunx)打包发布java web工程

    Liunx服务器上打包发布web工程(开发工具Idea) 1.首先使用Idea自带的打包功能(点击package打包) 2.然后链接到服务器(我这里用的是Xshell链接工具) 3.将打好的war包传 ...

  9. Unity3D引用dll打包发布的问题及解决

    今年我们开始使用Unity3D开发MMORPG,脚本语言使用C#,这样我们就可以使用以往积累的许多类库.但是,在U3D中使用.NET dll的过程并不是那么顺利,比如我们今天遇到的这种问题. 一.问题 ...

随机推荐

  1. ARM-Linux移植之(四)——根文件系统构建

    相关工具版本: busybox-1.7.0 arm-linux-4.3.2 linux-2.6.22   1.配置busybox并安装. 在我们的根文件系统中的/bin和/sbin目录下有各种命令的应 ...

  2. Linux机器工作环境安装

    安装gcc编译器: yum -y install gcc 安装wget: yum -y install wget 安装python-setuptools: wget http://peak.telec ...

  3. 【树莓派】RASPBIAN镜像初始化配置

    [树莓派]如何烧录镜像详细版 接上一节,系统已经烧录完毕了,将其放置于树莓派然后运行起来 我是直接接显示器了,若有需要转接头的自行淘宝搜索购买~~电源使用的是5V 2.5A的 首次开机会时间较长 且有 ...

  4. 华为部分真机调试无法显示log问题解决

    真机测试时,部分华为手机无法获取全部的log信息.或者说无法获取Error以下级别的log信息.比如P7 这是因为部分华为机出厂默认log设置为关闭状态,因此只能获取Error以上级别的log信息.蛋 ...

  5. CSS中盒子垂直居中的常用方法

    在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中相对来说是比较复杂一些的.下面 ...

  6. Hbase 一次表异常,有一张表 无法count scan 一直显示重连

    z_activeagent z_weekstore z_wstest zz_monthstore row(s) in 0.5240 seconds => ["KYLIN_02YJ3NJ ...

  7. 一篇文章让你了解并掌握memcached

    第一章 memcached简介 1.1为什么引入memcached 随着数据量的增大,访问的集中,REBMS负担加重,数据库响应恶化. Memcached是高性能的分布式内存缓存服务器,目的是通过缓存 ...

  8. OSCache-JSP页面缓存(1)

    一.OSCache提供的缓存标签 这是OSCache提供的标签库中最重要的一个标签,包括在标签中的内容将应用缓存机制进行处理,处理的方式将取决于编程者对cache标签属性的设置. 第一次请求到达时,标 ...

  9. 运单waybill快速录入

    运单waybill快速录入 前台页面: 1修改页面onAfterEdit事件, 后台代码:ajax响应回请求1 为成功,0 为失败

  10. 关于ptrdiff_t

    整除.opencv中的内存一般是通过malloc分配,不能保证都是都能被16整除,此时需要截断,但是剩下的内存要如何维护? CV2.0的这样维护的:在 malloc 是多申请一个指针的空间,这个指针指 ...