记某项目的vue.config.js的配置，主要是获取git版本信息，并写入新创建的json文件

/** @format */
const moment =  require("moment");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const GreatePlugin = require("generate-asset-webpack-plugin");
const shell = require("shelljs");

let commitCount = Number(shell.exec("git rev-list --count HEAD"));  // 动态获取当前git分支提交总次数，用于方便查看版本大小

// 获取git的打包信息，新建一个json文件进行存储
// 获取项目打包的版本信息，但是不能返回对象格式。
let getVersion = function () {
  let info = {};
  info["打包日期"] = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
  let reflog = shell.exec("git reflog -1");
  let version = "v";
  if (reflog) {
    version = reflog.split(" ")[0];
  }
  if (reflog) {
    info["版本信息"] = `commitId=${version}`;
    info["最新版本信息"] = `${reflog}`;
    info["提交次数"] = `${commitCount}`;
  }
  return JSON.stringify(info);
};

// 版本号格式，1.x1.x2，其中1.x1为产品定义的版本号，默认为1.0,x2,为git提交的总数，通过命令获取

const pkgVersion = process.VUE_CLI_SERVICE.pkg.version; // 获取package.json文件里面的version版本号,格式为1.x1.x2,需要截取为1.x1
let index1 = pkgVersion.indexOf(".");
let index2 = pkgVersion.indexOf(".", index1 + 1);
const pkgVersionSub = pkgVersion.substr(0, index2);
const buildVersion = `${pkgVersionSub}.${commitCount}`;


const webpack = require("webpack");
let publicPath = "/";
let outputDir = "dist";
const date = moment(new Date()).format("YYYYMMDD");
let suffix = `${buildVersion}-${date}`;
const projectname = process.argv[3]; // 获取build后面的参数确定执行哪个文件
let VUE_APP_TYPE = process.env.VUE_APP_TYPE;
const fileOutputName = `${projectname}-${VUE_APP_TYPE}-${suffix}`;
if (process.env.NODE_ENV == "production") {
  publicPath = "./";
  if (VUE_APP_TYPE) { // 给打包的文件名加上后缀
    outputDir = `dist/${fileOutputName}`;
  } else {
    outputDir = `dist/${projectname}`;
  }
}

// 创建打包的json文件文件
let configureWebpackConfig = {
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
    }),
    // 创建版本信息json文件
    new GreatePlugin({
      filename: "version.json",
      fn: (compilation, cb) => {
        cb(null, getVersion(compilation));
      },
      extraFiles: [],
    }),
  ]
};
if (process.env.NODE_ENV == "production") {
  configureWebpackConfig.plugins.push(
    new FileManagerPlugin({
      events: {
        onEnd: {
          archive: [
            { source: `./dist/${fileOutputName}`, destination: `./dist/${fileOutputName}.zip` },
          ]
        }
      }
    })
  );
}

module.exports = {
  publicPath,
  outputDir,
  pages: {
    index: {
      entry: "src/main.js",
      // 模板来源
      template: "src/index.html",
      publicPath: "./",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 提取出来的通用 chunk 和 vendor chunk
      chunks: ["chunk-vendors", "chunk-common", "index"],
    }
  },
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery",
      }),
    ],
  },
  configureWebpack: configureWebpackConfig,
  chainWebpack: (config) => {
    // 解决iview 按需引入babel转换问题
    config.module.rule("view-design").test(/view-design.src.*?js$/).use("babel").loader("babel-loader").end();
    // 修复xlsx-style包报错问题，自行修改cpexcel.js文件，并用修改后的本地包覆盖node_modules包
    config.resolve.alias.set("./dist/cpexcel", require("path").resolve(__dirname, "src/assets/lib/cpexcel.js"));
  },
  // fix： ol依赖的这两个包在开发环境没有将es6语法转为es5导致在IE上会报错问题
  transpileDependencies: [
    "ol-mapbox-style",
    "@mapbox/mapbox-gl-style-spec",
    "crypto-js",
    "@antv/g6",
    "@antv/layout",
    "d3-force",
    "d3-dispatch",
    "ml-matrix",
    "regl",
  ],
  lintOnSave: true,
  devServer: {
    proxy: {
      "/api": {
        target: "http://ip:port",     // 测试环境
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }

};