dva 打包多个html,dva 打包部署填坑指南

1. 打包部署的概念

当我们使用 dva 开发项目时，我们可能是在 Webstorm 开发工具上进行开发的，当然，我们也安装了 Node 运行环境。在开发阶段，我们可以通过以下两种方式将项目跑起来：

使用 npm run start(在 node 环境下将项目跑起来)

使用 Webstorm 的 npm 指令(Webstrom 集成了 node 环境，实际上还是运行了 npm run start)

开发完成以后，你需要将项目交给客户，遵循客户就是上帝的原则，你不能要求客户的计算机必须安装 node 环境，或者 Webstorm 开发环境。站在客户的角度来说，他们希望我们开发人员交给他们类似静态页面的东东 index.html ，然后直接扔到服务器上就可以了。

打包 ：在 dva 框架中可以使用 npm run build 指令进行打包，打包完成后在根目录下会生成 dist 目录，该目录将整个项目整合成一个静态资源目录，并且对代码进行了压缩。

注：dist 目录下有个 index.html 文件，你直接点击它用浏览器打开会发现出现一个空白页面，你可能会怀疑打包出现了问题。这里解释下原因：项目中不可避免的会与后台交互，请求后台地址会包含 ip+port(如：192.168.0.1:8080)，就像你和你的朋友写信，信封上必须得包含两个东东，你朋友家的地址和你家的地址，而我们这里的后台地址就是你朋友家的地址，你并没有告诉 http 你家的地址是啥，所有这次交流就不会成功。解决方法就是将静态资源扔到服务器上。

部署 ：我们把静态资源扔到服务器上，然后通过服务器启动 index.html，我们访问服务器的地址(192.168.0.1:80)就是你家的地址，有了你家和你朋友家的地址，这次通信才能成功。这里使用的服务器是 Nginx，文件大小只有二十几兆，使用起来也很简单，只需配置相关文件的属性即可，下面就来介绍具体配置过程。

2. 下载 Nginx

下载完成之后，解压缩，得到如下目录结构：

我们需要关心的只有两个子目录：conf + html 。

conf 目录 > nginx.conf 文件，用于做简单配置；

html 目录用于存放打包的静态资源，也就是前面一直说的把静态资源扔到服务器，扔哪，就扔这儿。

3. 配置文件说明

打开 conf 目录下的 nginx.conf 文件，如下：

这个配置文件中我们只需要注意三处地方即可，在上图中标明的 1 2 3位置。以下对这三点一一介绍。

第一处：(设置你家的地址) nginx 默认监听的端口，这里设置为 80，也可设置其它空闲端口，但要与项目下的 src/utils/config.js (项目中的配置文件)中的端口号(你项目中所有的 ip + port 应当抽出到配置文件中)保持一致。

注 ：如果要修改 nginx.conf 文件中默认监听端口，记得修改项目中 src/utils/config.js 中的端口号，并在命令行中输入 npm run build 重新编译生成新的 dist 目录。

第二处：(设置你朋友家的地址)这里设置提供接口服务的地址，也就是用 JAVA 代码写的服务端接口地址。

第三处：系统打包成 dist 目录，存放在 nginx 目录下的路径名称。

4. 启动项目

最后，配置完成后，保证提供接口服务的 JAVA 端已经启动，再启动 nginx 中的应用程序，就可以在浏览器中访问项目了。

tip：浏览器建议使用谷歌浏览器。