HOS基础开发平台

# 前端

# 打包

当项目开发完毕，只需要运行一行命令就可以打包你的应用，根据不同的打包命令读取不同的.env 配置文件。所有命令请查询 package.json 文件下的 scripts 属性。

当运行本地环境时默认读取 .env.development 配置文件

以下为不同环境的打包命令及 每条命令读取的配置文件：
npm run bulid               读取 .env.production 配置文件
npm run build:test          读取 .env.test 配置文件
npm run build:demo          读取 .env.demo 配置文件

# 产物

从 2.2.1 版本开始（包括 2.2.1）根目录下会多生成一个 zip 格式的文件，便于上传部署到服务器。文件名规则为：${版本号}.${客户端日期}，示例如下图：

img.png

在 2.2.1 版本之前，打包直接生成 dist 文件，需要手动压缩和命名。而在 2.2.1 版本及之后，打包时会将 dist 文件夹放置在一个以项目名命名的文件夹中，用于区分多个前端应用。同时，打包后会将该文件夹压缩成一个 zip 文件，方便上传和部署到服务器。这样的改进使得在部署多个前端应用时更加方便，同时提供了一个简洁的方式来上传和部署前端应用。

# Nginx 配置

# 一般项配置

worker_processes  1;

events {
    worker_connections  1024;
}

http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
        charset utf-8;

        location / {
            root   /前端包地址;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass http://后端服务ip:后端服务port/api;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

建议开启 Gzip 压缩

  • 在 http 配置中加入如下代码对全局的资源进行压缩，可以减少文件体积和加快网页访问速度。
# 开启gzip压缩
gzip on;
# 不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
# 压缩缓冲区
gzip_buffers 16 64K;
# 压缩版本（默认1.1，前端如果是squid2.5请使用1.0）
gzip_http_version 1.1;
# 压缩级别，1-10，数字越大压缩的越好，时间也越长
gzip_comp_level 5;
# 进行压缩的文件类型
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
# 跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary on;
# IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";

# Websocket 配置

  • 如在项目中使用消息中心模块, 需对 Nginx 进行相关配置, 以支持 Websocket。 详细配置请参阅此处 (opens new window)
map $http_upgrade $connection_upgrade {
    default upgrade;
    ''  close;
}

server {
    listen       8000 ssl;
    server_name  localhost;

    ssl_certificate        /hos/app/ssl/hos/hos.crt;
    ssl_certificate_key    /hos/app/ssl/hos/hos.key;

    location / {
        alias  /hos/app/xxx/dist/;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    location /api/ {
        proxy_pass http://xxx/api/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "$connection_upgrade";
    }
}

# 配置项目根路径

  1. 如需要修改项目根路径为 '/test', 可在输入打包命令时添加path参数：npm run build --path=/test 配置publicPath
  2. 打包, 执行相应环境的打包命令
  3. nginx 配置:
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
		charset utf-8;

		location /oa {
            root   /hos-base-web;
			try_files $uri $uri/ /oa/index.html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

# HOSUI+HISUI 模式

由于部分产线缺少 VUE 开发人员，为快速进行代码，因此业务部分的前端框架采用 HISUI 进行编码，因此需要将 HOSUI 和 HISUI 集成到一起，以实现 HOSUI+HISUI 模式。

  1. 创建业务工程根目录，如hisfront,可以根据实际情况改为 OA、DTS 等，然后在根目录下创建static文件夹;
  2. 将 hos-app-web 工程下载下来后，在打包时添加path参数，如npm run build --path=/his/base;
  3. 将打包后的hos-app-web下的dist文件夹复制到static下,并将 dist 文件夹重命名为base;

img.png

  1. 将 HISUI 的前端相关文件复制到业务前端工程的static下，如下图所示：

img.png

  1. 将base中的index.html文件复制到业务前端工程的static下.

  2. 在 base 同级文件夹下编写业务代码；

  3. 修改 nginx 配置如下：

#user  nobody;
worker_processes  1;


events {
worker_connections  1024;
}

http {
include       mime.types;
default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    map $http_upgrade $connection_upgrade{
        default upgrade;
        '' close;
    }
    #gzip  on;
    upstream my_websocket {
        server 127.0.0.1:8081;
    }

    server {
        listen       8090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /his {
            alias   D:/workspace/hisfront/static/;

            if ($request_filename ~* ^.+\.(?:html|js|css|png|jpg|gif|woff)$){
                break;
            }
            try_files $uri $uri/ /base/index.html;
            index  index.html index.htm;
        }
        location /api/ {
            #代理后台
            proxy_pass http://localhost:8081/api/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "$connection_upgrade";
            proxy_read_timeout 300s;
            proxy_send_timeout 60s;
        }
        error_page  404              /404.html;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

# 一次构建,任意部署

  1. 可以进行普通构建 npm run build
  2. 可以指定 path 参数 npm run build --path="/test"
  3. 可以指定参数 pb(静态资源路径),参数 rb(路由 base) npm run build --pb="aaa/bbb/ccc" --rb="aaa",rb 参数如果不写,则截取最后一个从/开头的字符串后剩余的字符串为值,如上面如不写,则默认值为 aaa/bbb
  4. 以命令 npm run build --pb="base/hos/test"为例,生成的 index.html 内容如下:
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="/favicon.ico" />
    <script>
      window.__webpack_public_path__ = '/base/hos/test/'
      window.VUE_APP_ROUTER_BASE = '/base/hos'
    </script>
    <script src="/base/hos/test/environment.js"></script>
    <link href="/base/hos/test/css/chunk-072f7927.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-1c97d9fa.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-2b1040cb.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-4432bed6.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-5f6ec70e.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-6dc16346.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-726ebdaf.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-7ef314f7.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-7f27d811.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-ac890736.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/chunk-afea74e4.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/fail.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/css/user.1722823376150.css" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-072f7927.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-0aeb00aa.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-0f9f40f4.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-12352cf4.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-1c97d9fa.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-2b1040cb.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-2d0d7a96.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-2d216214.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-4432bed6.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-57422108.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-5f6ec70e.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-60f70530.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-655fb964.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-664503c4.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-6dc16346.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-726ebdaf.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-753d15ee.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-75fca8da.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-7d3d5c77.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-7ef314f7.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-7f27d811.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-ac890736.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/chunk-afea74e4.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/fail.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/js/user.1722823376150.js" rel="prefetch" />
    <link href="/base/hos/test/css/app.1722823376150.css" rel="preload" as="style" />
    <link href="/base/hos/test/css/chunk-vendors.1722823376150.css" rel="preload" as="style" />
    <link href="/base/hos/test/css/hosui.1722823376150.css" rel="preload" as="style" />
    <link href="/base/hos/test/js/app.1722823376150.js" rel="preload" as="script" />
    <link href="/base/hos/test/js/chunk-vendors.1722823376150.js" rel="preload" as="script" />
    <link href="/base/hos/test/js/echarts.1722823376150.js" rel="preload" as="script" />
    <link href="/base/hos/test/js/hosui.1722823376150.js" rel="preload" as="script" />
    <link href="/base/hos/test/js/vue-vendors.1722823376150.js" rel="preload" as="script" />
    <link href="/base/hos/test/css/hosui.1722823376150.css" rel="stylesheet" />
    <link href="/base/hos/test/css/chunk-vendors.1722823376150.css" rel="stylesheet" />
    <link href="/base/hos/test/css/app.1722823376150.css" rel="stylesheet" />
  </head>
  <body>
    <noscript
      ><strong
        >We're sorry but 基础开发框架 doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong
      ></noscript
    >
    <div id="app"></div>
    <script>
      document.write(
        "<script type='text/javascript' async src=" +
          __hos.VUE_APP_PAGE_OFFICE_API +
          '/pageoffice.js?_t=' +
          Date.now() +
          '></s' +
          'cript>'
      )
    </script>
    <script src="/base/hos/test/js/hosui.1722823376150.js"></script>
    <script src="/base/hos/test/js/vue-vendors.1722823376150.js"></script>
    <script src="/base/hos/test/js/echarts.1722823376150.js"></script>
    <script src="/base/hos/test/js/chunk-vendors.1722823376150.js"></script>
    <script src="/base/hos/test/js/app.1722823376150.js"></script>
  </body>
</html>

此时如果想换路由前缀,或将静态资源部署到其他路径下,则不需要重新构建,仅需修改 index.html 中的这段代码

<script>
    window.__webpack_public_path__ = '/base/hos/test/'
    window.VUE_APP_ROUTER_BASE = '/base/hos'
</script>

同时将其他所有 js,css 的路由前缀进行统一调整即可(当然记得同时要修改 nginx 的配置)

← 问题列表 →