文档章节

dva 打包部署填坑指南

dkvirus
 dkvirus
发布于 2017/07/27 10:12
字数 999
阅读 400
收藏 0

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

Nginx 百度云盘下载地址

下载完成之后,解压缩,得到如下目录结构: nginx 目录

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

  • conf 目录 > nginx.conf 文件,用于做简单配置;
  • html 目录用于存放打包的静态资源,也就是前面一直说的把静态资源扔到服务器,扔哪,就扔这儿。

3. 配置文件说明

打开 conf 目录下的 nginx.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 中的应用程序,就可以在浏览器中访问项目了。

nginx 应用程序

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

© 著作权归作者所有

dkvirus
粉丝 52
博文 125
码字总数 122513
作品 0
六安
程序员
私信 提问
wepy+weappx开发小程序遇到的坑以及解决方案

前言 从小程序的发布,到现在已经有一年多的时间了,从当时信誓旦旦的要替代APP,到近期实现了APP和小程序互跳的功能,定位也悄然变为APP的一个补充,都是现实给逼的,就像当时卸载了摩拜和美...

无尘霄
2018/06/12
0
0
Android Studio3.0填坑指南

序言 Android Studio3.0 作为这个世界上走在最前沿的生物“猿”,怎么能对新事物一无所知呢,10月26日,随着Android 8.1 Oreo的预览版发布,Android Studio3.0正式版也发布了,作为Android开...

阿韦爱Android
2017/10/30
0
0
Docker部署dvajs搭建的前端静态文件

dva构建项目 安装&创建项目 $ npm install dva-cli -g $ dva -v #查看一下版本是否安装成功 $ dva new demo 运行 dva new 一个项目时,会自动下载node_modules包,安装好后可以直接运行: $ ...

王彩彩的胖狗子
2018/05/11
0
0
Unity AR开发vuforia +HoloLens 应用开发部署

最近把vuforia sdk制作的 AR项目需要移植到HoloLens上进行展示,遇到各种问题在这里记录一下,为开发者填一下坑在遇到类似问题可以快速解决. 一、Unity版本问题:(1)、最开始用的是5..5.6版...

liang_704959721
03/21
0
0
webpack实战之从roadhog2.x到webpack4.x

 这半周做了一件事,将手上的前端项目从使用过去dva脚手架自带的roadhog2.x打包工具迁移至使用webpack4.x打包,成功让本人掉了不少头发。 背景   先说背景,目前主要做的项目其实都是兄弟...

没能拯救银河系
08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部