hue4.1.0引进vue.js、axios.js、browser.js

本文详细介绍了如何在Hue4.1.0中集成Vue.js、axios.js和browser.js，通过具体步骤指导读者完成前端库的引入，适用于需要升级或扩展Hue功能的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录hue4.1.0引进vue.js、axios.js、browser.js等

由于业务需要引进vue.js、axios.js来修改hue，在这里记录一下hue引进vue.js等js的方法。
步骤：

首先下载vue，下载地址
将下载到本地的vue.js放在目录desktop/core/src/desktop/static/desktop/js/下。
在desktop/core/src/desktop/templates/hue.mako文件添加代码：

  // Add modified URL for .clearable background
  var originalClearableImgUrl = '${ static('desktop/art/clearField@2x.png') }';
  var clearableImgUrl = typeof adaptHueEmbeddedUrls !== 'undefined' ? adaptHueEmbeddedUrls(originalClearableImgUrl) : originalClearableImgUrl;
  document.styleSheets[0].insertRule('.clearable { background: url(' + clearableImgUrl + ') no-repeat right -10px center; }');
% endif
  </script>

  ${ commonHeaderFooterComponents.header_i18n_redirection() }

  <script src="/desktop/globalJsConstants.js?v=${ hue_version() }"></script>

  % if not conf.DEV.get():
  <script src="${ static('desktop/js/hue.errorcatcher.js') }"></script>
  % endif
  <script src="${ static('desktop/js/hue4.utils.js') }"></script>
  ## 在这里引入vue.js和其他js，位置大概在120行处
  <script src="${ static('desktop/js/vue-2.5.3.js') }"></script> 
  <script src="${ static('desktop/js/axios.min.js') }"></script>
  <script src="${ static('desktop/js/browser.min.js') }"></script>
</head>