记录 vue 多页面项目 动态加vconsole 打tar包 webpack 插件

先搞环境变量

VUE_APP_OUTPUT_DIR = 测试

然后根据环境变量修改打 出来的包名字

// vue.config.js
// 引入插件
const BuildTarPlugin = require('./BuildTarPlugin');
 configureWebpack: {
    plugins: [
      new BuildTarPlugin(),
    ]
  },
// 修改打包名字
outputDir:  process.env.VUE_APP_OUTPUT_DIR

插件

const cp = require("child_process");

class BuildTarPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("myBuildTar", (stats) => {
      if (process.argv.slice(2).includes("build")) {
        cp.exec(
          `tar -cvf ${process.env.VUE_APP_OUTPUT_DIR}.tar ${process.env.VUE_APP_OUTPUT_DIR}`
        );
      }
    });
    if (!process.env.VUE_APP_IS_CONSOLE) return;
    compiler.hooks.compilation.tap("addVConsole", (compilation, callback) => {
      compilation.plugin("html-webpack-plugin-before-html-processing", function(
        htmlPluginData,
        callback
      ) {
        htmlPluginData.html = htmlPluginData.html.replace(
          "</head>",
          `<script src='https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js'></script>
          <script>
            if (!sessionStorage.getItem('hideFlag') && !location.href.includes('hideFlag=1')) {
              var vConsole = new window.VConsole();
              vConsole.option.onReady = () => {
                var vconsoleDOM = document.querySelector('#__vconsole');
                vconsoleDOM.classList.add('dt-track-ignore');
              }
            }
          </script></head>`
        );
      });
    });
  }
}

module.exports = BuildTarPlugin;