前言

最近换了一个新环境。之前部署打包的过程有所区别，并且不知道问题出现在哪里，让我花费了好几天的时间，但最后一行代码久解决了。内心无比忧郁，自己给自己挖的坑，再怎么也要解决！

首先项目是使用create-react-app这个工具生成的。开发环境与本地生成的服务器访问build文件都是没有问题的，页面正常显示。但是打包部署到服务器上就出现空白页。在这期间遇到两个问题，第一：打包时相对路径与绝对路径。第二：使用的路由方式。

问题一：打包相对路径与绝对路径

使用npm run build进行打包的时候，默认使用的是绝对路径进行打包，但是部署到服务器上找资源的时候就出现404。因为项目本地访问的时候使用的是根目录来找资源，但是我们部署到服务器的时候，通常是www.xxx.com/myapp这种形式来找资源，是通过次级目录来访问的，自然就会找不到资源。

解决方法：

在package.json中加入

"homepage": "."

以上设置会使用相对路径来找资源。

问题二：部署到服务器上的子目录中，访问时出现空白。

在项目中我使用了browserHistory的访问形式，如下：

import createHistory from "history/createBrowserHistory";
const history = createHistory();

<Router history={history}>
    //something you need to do 
</Router>

这种形式来使用路由的，是用浏览器history对象的方法去请求服务器， 如果服务器没有相对于的路由去指向对应的页面路由就会找不到资源。

解决方法：

方法一：使用hashRouter解决

import { HashRouter as Router, Route, Switch } from "react-router-dom"

<Router>
   //something you need to do 
</Router>

当你访问你定义的一个'/'根路径的时候，就会变成'challengeTest/index.html#/'，就会去找路由的相应资源。

方法二：仍使用browerRouter，但需要服务端改配置。

如果服务器上使用的是nginx，那么需要配置如下：

location /myapp {
    try_files $uri $uri/ /index.html
}

总结

使用新技术是一件充满有趣的过程，但是当自己使用的时候，需要考虑清楚自己为什么要使用它，有什么好处，有什么不利的影响。这些要考虑到，才会更容易的解决问题。

最后更新于 2018-08-14 12:28:20 并被添加「react 打包部署」标签，已有 3318 位童鞋阅读过。

相关文章

• What's new in React16.3(.0-alpha)翻译学习
• react中使用swiper遇到的坑