打包后资源路径

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

方式一:

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. 第13章 Spring框架的设计理念与设计模式分析

    13.1 Spring的骨骼架构 最核心的组件是:Core, Context, Bean. 13.1.1 Spring的设计理念 Spring最核心的组件是Bean组件.Spring解决的最关键的问题 ...

  2. 笔记:Tid设计思维

    Tid设计思维 2017年7月19日TiD大会创新设计论坛 一.     设计思维实践: 为什么他能觉察你看不到的机会 1.    原因一:[觉察]与[看] 他(们)能“觉察”你“看”不到的机会,他们 ...

  3. flask系列五之flask_script

    1.一个简单的例子 在工程里面新建一个Python文件命名为manage.py (1)安装flask_script包,然后引入 from flask_script import Manager fro ...

  4. VS2010调用halcon的时候出现试图加载格式不正确的程序(this.hWindowControl1 = new HalconDotNet.HWindowControl();)

    [重要错误修改] /// <summary> /// 设计器支持所需的方法 - 不要 /// 使用代码编辑器修改此方法的内容. /// </summary> private v ...

  5. Tornado 高并发源码分析之六---异步编程的几种实现方式

    方式一:通过线程池或者进程池 导入库futures是python3自带的库,如果是python2,需要pip安装future这个库 备注:进程池和线程池写法相同 from concurrent.fut ...

  6. nginx搭建文件服务器配置文件

    worker_processes 1; events { worker_connections 1024;} http { include mime.types; default_type appli ...

  7. Effective ObjectiveC 2.0 Note

    [Effective ObjectiveC 2.0 Note] 1.The memory for objects is always allocated in heap space and never ...

  8. FP服务无法启动,端口被占用

    一.错误如下: Starting CISAgent..Exception in thread "main" com.i2.cis.util.SystemConfigurationE ...

  9. 设置html页面不被浏览器缓存

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" ...

  10. 在cmd中 操作 数据库 MySQL 的一些命令

    环境变量配置配置好以后, 打开cmd 连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样) 断开:exit (回车) 创建授权:grant sele ...