打包部署
# 打包部署
# 编译代码
# [1]编译组件库
如果你修改了组件库中的组件,那么在部署之前,建议首先重新编译生成组件库。
使用下面命令,重新编译生成组件库:
lerna run lib
提示
如果提示找不到 lerna
命令,那么请全局安装 lerna
。
yarn global add lerna
或者 npm install -g lerna
# [2]编译工程代码
组件库代码编译成功之后,使用下面命令编译工程代码。
yarn e:ui prod
注意
在编译工程代码之前,请首先检查和修改 @herodotus/ui/.env.prodution
文件中的参数 VUE_APP_GATEWAY
, 该参数是后端服务的连接地址,如果该参数配置错误,打包成功之后将无法正确连接到后端服务。
# 部署至中间件
编译成功之后的代码,存放在 @herodotus/ui/dist
目录下。全部是纯静态代码,包括:index.html、js、css、images,以及其它内容。
编译之后的代码,是无法直接运行的。需要放置在可以支持静态资源运行的中间件中,例如:Nginx
、Apache
或 Express
等。
下文以 Nginx 为例,具体说明部署。
# [1]Nginx安装(Windows)
- 下载 Windows 版本的
Nginx
,下载地址 (opens new window)。 - 将下载的
nginx-1.XX.X.zip
解压至你想要放置的目录即可。
# [2]修改Nginx配置
假设我们打算将编译好的工程代码放置在 ${nginx_home}/html/ui
目录下。
那么在 ${nginx_home}/conf
目录下,找到 nginx.conf
文件,将 root 地址指定为 ${nginx_home}/html/ui
, 如下所示:
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8899;
server_name localhost;
location / {
root `html/ui`;
index index.html index.htm;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# [3]拷贝代码
将@herodotus/ui/dist
目录下的全部代码,拷贝至 ${nginx_home}/html/ui
目录下。
# [4]运行Nginx
打开命令提示符 (CMD) 或其它终端工具,进入 ${nginx_home}
目录,输入:.\nginx.exe
即可运行 Nginx
# [5]验证
打开浏览器,输入地址 http://localhsot:8080 (opens new window)。如果页面可以正常显示,则说明部署完成。
说明
以上内容,特别是中间件的选择以及中间件的配置,仅是示例说明。请结合自身实际进行选择。