项目部署后需要和门户进行交互，获取token信息

开发完的项目，往往需要和门户进行集成，需要获取到门户的token信息

查看开发手册-iframe集成，

获取token的源代码

(function(container, _origin) {
  function ensureToken(callback) {
    if (window.parent !== window) {
      setTimeout(function() {
        window.parent.postMessage(
          {
            requires: ['token'], // 立即返回数据
            watch: ['token'], // 监听数据变化
          },
          _origin || '*'
        );
      }, 0);
      window.addEventListener('message', function(e) {
        if (_origin && e.origin !== _origin) {
          return;
        }
        if (e.data.type === 'requires') {
          callback(e.data.values.token);
        } else if (e.data.type === 'watch') {
          if (e.data.key === 'token') {
            callback(e.data.value);
          }
        }
      });
    }
  }

  function loadScript(src) {
    var script = document.createElement('script');
    script.type ='text/javascript';
    script.src = src;
    container.appendChild(script);
  }

  ensureToken(function(token) {
    var initial = !window.htconfig.Data.token; // window.htconfig.Data.token是自定义的token名，比如window.__TOKEN__,在自己的项目中通过window.__TOKEN__来获取使用即可
    window.htconfig.Data.token = token;
    if (initial) {
      // 需要 token 的请求在这里初始化
      loadScript('./js/index.js');// 此处的js是打包后的js入口文件，在dist文件中的index.html中能查看到，一般叫app.xxxx.js,这个路径得写对
    }
  });
})(
  document.getElementById('approot') || document.body,
  "http://cloudiip-imine.bonc.local"// 此处是父应用的origin值
);

以上代码，需要放置到打包后dist中的index.html中，放在

<div id='app'></div>

下方，否则会报错。loadScript的参数值取决于打包后的js入口文件名

此时会发现一个问题，就是因为打包后的js入口文件名不是固定的，那就需要每次都只能是打包后手动来修改loadScript，这就很麻烦，要怎么解决呢？能否让js入口文件名称是自己指定的名称呢？如下配置即可
vue.config.js

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({ 
	....
	configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') { // 只在生产模式下修改输出文件名
      const outputFileName = 'customName'; // 设置自定义的文件名
      config.output.filename = `./js/[name].${outputFileName}.js`;
      config.output.chunkFilename = `./js/[name].${outputFileName}.js`;
      // Object.assign(config, {
      //   output: {
      //     filename: `${outputFileName}.js`,
      //     chunkFilename: `[name].${outputFileName}.js`
      //   }
      // });
    }
  }
})

经过此配置，打包后查看dist/js文件夹发现文件名已经都变了

最后就是把获取token的源代码直接放在public/index.html中即可（注意放置的位置），不需要等到打包后在修改index.html。
loadScript的参数值直接给’./js/app.customName.js’即可