构建与发布

构建之前

构建之前，你需要将系统中的一些配置修改为自己系统的配置。

index.html

修改header信息

  1. <title>HeyUI Admin管理平台</title>
  2. <meta name="keywords" content="heyui,hey,ui,vue,es6" />
  3. <meta name="description" itemprop="description" content="HeyUI Admin管理平台" />

修改统计信息

index.html 中已经添加了百度统计，你可以按照自己的需求修改统计代码。

  1. <script>
  2. // baidu 统计
  4. if(window.location.hostname == 'admin.heyui.top'){
  5.   var _hmt = _hmt || [];
  6.   (function() {
  7.     var hm = document.createElement("script");
  8.     hm.src = "https://hm.baidu.com/hm.js?dc337e576ecea81b5da68a42b8e7f75a";
  9.     var s = document.getElementsByTagName("script")[0]; 
  10.     s.parentNode.insertBefore(hm, s);
  11.   })();
  12. }
  13. </script>

router-config

修改titile定义

  1. router.beforeEach((to, from, next) => {
  2.   HeyUI.$LoadingBar.start();
  3.   if (to.meta && to.meta.title) {
  4.     document.title = to.meta.title + ' - 管理应用';
  5.   } else {
  6.     document.title = '管理系统';
  7.   }
  8.   next();
  9. });

构建

不管使用的是hey-cli还是vue-cli构建与发布都已经在package.json中定义好了，使用相同的命令即可。

最重要的是注意配置publicPath属性，按照系统的需求配置。

  1. npm run build

部署

我们提供了一个简单的nginx配置示例：

  1. server {
  2.     listen       80;
  3.     server_name  www.a.com;
  5.     # 开启gzip
  6.     gzip on;
  7.     gzip_min_length 1k;
  8.     gzip_buffers 4 16k;
  9.     gzip_comp_level 2;
  10.     gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  11.     gzip_vary off;
  12.     gzip_disable "MSIE [1-6]\.";
  14.     # 反向代理配置
  15.     location /api {
  16.         proxy_pass http://localhost:8080/api;
  17.         proxy_set_header Host $http_host;
  18.     }
  19.     location / {
  20.         root   /usr/share/nginx/folder;
  21.         # 单页应用都跳转 index.html
  22.         try_files $uri $uri/ /index.html;
  23.         index  index.html index.htm;
  24.     }
  25. }