vue + node + es 下的moloch 的那些坑....

官网: https://molo.ch/
github:https://github.com/aol/moloch
Moloch网络流量分析工具 介绍
moloch安装配置

#打包命令
./easybutton-build.sh --install

#简单打包查看页面　项目路径 :xPacket/viewer/vueapp 下 创建tmp.sh 文件
　 node ./build/build.js
　 rm -rf /u2/xPacket/viewer/vueapp/dist
　 cp ./dist /u2/xPacket/viewer/vueapp -r

Molode 中英文转换

1.安装 vue-i18n依赖

npm install vue-i18n --save-dev

2.在/xPacket/viewer/vueapp/src/components下新建文件夹language，并在文件夹language下新建zh.js及en.js

【xPacket/viewer/vueapp/src/components/language/en.js】
module.exports = {
    language: {
        name: '中文'
    },
    vTime: {
        'Last hour':'Last hour', 
        'Last week':'Last week',
        'Last 2 weeks':'Last 2 weeks',
        'Last month':'Last month',
        'Last 2 months':'Last 2 months',
        'Last 6 months':'Last 6 months', 
    }
}

【xPacket/viewer/vueapp/src/components/language/zh.js】
module.exports = {
    language: {
        name: 'English'
    },
    vTime: {
        'Last hour':'最后一小时', 
        'Last week':'上周',
        'Last 2 weeks':'过去2周',
        'Last month':'上个月',
        'Last 2 months':'过去2个月',
        'Last 6 months':'过去6个月', 
    }
}

3.在main.js下引入注册vue-i18n

....
// Chinese English switch
import VueI18n from 'vue-i18n'; 
// internal deps
....
Vue.use(VueI18n)
const i18n=new VueI18n({
    locale:localStorage.getItem('languageSet')||'zh',   //Get the user's choice of Chinese and English from localstorage. If not, the default is Chinese
    messages:{
        'zh':require('./components/language/zh'),//中文
        'en':require('./components/language/en')//英文
　　　　　　... //可以接着写其他
    }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  i18n,   //Mount I18N to Vue root instance
  components: { App },
  template: '<App/>',
  created: function () {
    // define app constants
    /* eslint-disable no-undef */
    Vue.prototype.$constants = {
      MOLOCH_TITLE_CONFIG: MOLOCH_TITLE_CONFIG,
      MOLOCH_DEMO_MODE: MOLOCH_DEMO_MODE,
      MOLOCH_DEV_MODE: MOLOCH_DEV_MODE,
      MOLOCH_VERSION: MOLOCH_VERSION,
      MOLOCH_PATH: MOLOCH_PATH,
      MOLOCH_MULTIVIEWER: MOLOCH_MULTIVIEWER,
      MOLOCH_HUNTWARN: MOLOCH_HUNTWARN,
      MOLOCH_HUNTLIMIT: MOLOCH_HUNTLIMIT
    };
  }
});

4.在dom里使用 KaTeX parse error: Double superscript at position 5: t(' '̲)，若在js里使用则 this…t(’ ')

Session.vue dom 中写
...
{{$t("sessions['"+header.friendlyName+"']")}} 
....
App.vue js 中写
...
　　console.log(this.$i18n.locale); //查看当前是英文还是中文
　　console.log(this.$t("vTime['All (careful)']"))
...

扩展 :
　　　　localStorage.setItem('languageSet',this.$i18n.locale)// 修改 当前是中文显示 还是英文显示 (得装插件vue-i18n 情况下,且变化的数值按照上面所书写)  this.$i18n.locale == zh  或 en
 

Molode 调取自定义 json 文件

自定义的文件写在 xPacket/viewer/vueapp/static下
this.axios.get('/static/***.json')
      .then(response => (
        console.log(response),
        console.log(response.data),
        console.log(response.data.venslang),
        this.$i18n.locale = response.data.venslang,
        console.log(this.$i18n.locale),
        localStorage.setItem('languageSet',this.$i18n.locale),
        console.log(this.$t("sessions['Start Time']")),
        console.log(this.$t('sessions.Info'))
      ))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
注意 打包后 ***.json 文件会在 xPacket/viewer/vueapp/dist/static  下生成一份  
　　还有一个地方 请用 " find / -name ***.json " 搜索全局,且这个地方修改 接口数据会变动态!