项目背景

业务：H5电商直播观看端，用户体系以微信用户为主

架构：PHP+vue，路由后端控制，用PHP渲染，前后端混合开发模式

需求场景：电商直播，用户需求差异化很大，为了满足不同行业和场景的直播需求，我们的功能点也做了差异化处理，用户可以在管理后台对直播页编辑，前端这边维护一个功能的配置表。随着需求的增加，版本迭代速度比较快，有时候更新了一个功能点可能只有某些合作方用得到，发版以后也会全网覆盖，这样会导致原本之前稳定的版本变得不再稳定，上线出现问题，给公司的测试压力很大，最重要的是用户的体验很不好。

解决方案：采用分级发布的方式，将合作商分为不同级别的用户，由后端维护一个用户权限表，前端打包出来的资源文件按照不同级别发布，根据后端输出的字段前端动态加载资源文件。保证最新的版本不会影响到其它合作商目前使用的稳定版本。

分级发布目录结构

结构：分级目录/版本号/

分级目录：V3最新版本 v2过度版本 public稳定版本

版本号：v_1.0.0 --

说明：除了分级目录以外我们还在每一个分级目录里维护一个版本号。原因是微信缓存问题，原本我们的资源文件在每次发布以后，后端都会在文件后面加上一个哈希的参数用来返回最新的文件，试过在html设置http-equiv,但经过实践js和CSS文件还是会被缓存住。

发布流程

以v3>v2>public为一个发布周期，且public和v3最多不超多两个版本，这样保证了开发的效率和维护的时间成本。

webpack打包配置

明确了目录结构和发布流程以后，接下来就是webpack的打包配置，这里我们需要用到__webpack_public_path__ ，由于资源文件路径是在页面加载的时候动态生成的，所以在打包的时候就不能在publicPath这个配置里去写一个固定的路径，不然页面加载就会报错。

具体配置

1.在入口文件的最顶部添加 __webpack_public_path __，buildPath是输出的加载路径

__webpack_public_path__= window.buildPath

2.将图片资源文件配置为相对的路径

    options: {
      limit: 10000,
      name: '[name].[ext]',
      outputPath:'/img/',
      publicPath:'../static/img/'
    }

在打包出来的app.js文件里可以看到我们打包的文件已经指向buildPath

资源加载

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
  <title>分级打包测试</title>
  <script>
    // 版本
    var versions = {
      'v2': 'v_1.0.2',
      'v3': 'v_1.0.3',
      'public': 'v_1.0.1'
    }
    var levelFlag = "${levelFlag}";
    window.buildPath = '//www.xxx.com/' + levelFlag + '/' + versions[levelFlag] + '/';
  </script>
</head>

<body>
  <!-- #vdom -->
  <div id="app"></div>
  <!-- #res -->
  <script>
    !function(){
      var Queue = [
        window.buildPath + '/css/app.css',
        window.buildPath + '/js/manifest.js',
        window.buildPath + '/js/vendor.js',
        window.buildPath + '/js/app.js'
      ]
      Loader(Queue, function(error, response){
        if (response === 'success') {
          console.log('Modules Load Success')
        } else {
          console.error('File错误 ==>', error)
        }
      })
     }()
  </script>
</body> 
</html>

总结

新人经验有限，第一次在掘金写东西，有很多不足的地方，多包涵，谢谢！以后工作之余会继续在掘金写一些技术的总结，多谢掘金多年的陪伴~

新年快乐

祝大家2020，工作顺利，幸福美满~

一起勉励前行！

前端项目分级梯度发布实践