打包后资源路径

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

方式一:

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. 第四章 Javac编译原理

    4.1 Javac是什么 是一种编译器,将JAVA源代码(.java文件)语言先转化成JVM能够识别的一种语言(.class文件),然后由JVM将JVM语言再转化成当前机器可以识别的机器语言. 4.2 ...

  2. 根文件系统的构建与分析(四)之瑞士军刀busybox生成系统基本命令

    根文件系统的构建与分析(四) 转载请注明 http://blog.csdn.net/jianchi88   Author:Lotte   邮箱:baihaowen08@126.com ls /bin, ...

  3. 多路复用IO

    多路复用IO(IO multiplexing) IO multiplexing这个词可能有点陌生,但是如果我说select/epoll,大概就都能明白了.有些地方也称这种IO方式为事件驱动IO (ev ...

  4. linux 下安装mysql-5.7.16

    1.解压tar -xvf mysql的包 tar -xvf mysql-5.7.16-1.el6.x86_64.rpm-bundle.tar(mysql 官网中即可找到) 2.查看是否需要卸载安装时候 ...

  5. leetcode884

    class Solution { public: void SplitString(const string& s, vector<string>& v, const st ...

  6. leetcode452

    public class Solution { public int FindMinArrowShots(int[,] points) { // multidimensional array cann ...

  7. Spring总结二:IOC(控制反转)xml方式

    1,简介: IoC :Inverse of control 控制反转 ,思想就是在项目中引入一个工厂容器,对项目中接口依赖对象的创建,实现项目中对于依赖对象解耦合. 将程序中对象的创建权以及对象的整个 ...

  8. maven搭建ssm

    前言 本文旨在利用maven搭建ssm环境,而关于maven的具体内容,大家可以去阅读<Maven 实战>.其实园内这方面文章已有不少,那么为什么我还要重复造轮子呢?我只是想记录自己的实践 ...

  9. instanceof php

    instdnceof php5  的一个新成员 功能: 使用这个关键字可以确定一个对象是否是类的实例,是否是累的子类 ,还是实现了某个特定的接口. <?php class A{} class B ...

  10. solr开发之基本操作

    package zr.com.util; import java.io.IOException; import java.util.List; import java.util.Map; import ...