Vue工程打包后重新修改BaseUrl（Revise BaseUrl after Vue project packaging）

在实际工程中遇到一种情况，需要在打包后修改app的名称即BaseUrl。所以写了一个脚本进行实现。

本来打包时设置的BaseUrl=apps001,访问时的路径为http://ip:port/apps001。
现在需要把路由地址修改为apps002，也就是在访问的时候访问http://ip:port/apps002。为实现这个目标特此编写该脚本。

The original ‘BaseUrl=apps001’ was set during packaging, and the path for accessing it ishttp://ip:port/apps001.
Now we need to modify the routing address to ‘apps002’, which means accessing it during accesshttp://ip:port/apps002. To achieve this goal, this script is hereby written.

具体代码如下：

const fs = require("fs");
const path = require("path");
const folderName = path.resolve("dist");
const ignoreFlag = "// -- RENAME IGNORE FLAGS --";
let oldAppName;
let newAppName;
function distForderExists(path) {
  try {
    if (!fs.existsSync(path)) {
      return false;
    } else {
      console.log(`  ···${folderName} folder exists`);
      return true;
    }
  } catch (err) {
    console.error(err);
    return false;
  }
}
function replaceInFile(filePath) {
  let data = fs.readFileSync(filePath, { encoding: "utf8" });
  if (data.indexOf(ignoreFlag) > -1) {
    // console.log(`  ··· File ${filePath} was ignored ···`);
    process.stdout.write(`  ··· File ${filePath} was ignored ··· \r`);
    return;
  }
  var result = data.replace(oldAppName, newAppName);

  fs.writeFileSync(filePath, result);
  // console.log(`  ··· File ${filePath} replace end ···`);
  process.stdout.write(`  ··· File ${filePath} replace end ·· \r`);
}
/**
 * Find all files inside a dir, recursively.
 * @function getAllFiles
 * @param  {string} dir Dir path string.
 * @return {string[]} Array with all file names that are inside the directory.
 */
const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
    const name = path.join(dir, file);
    const isDirectory = fs.statSync(name).isDirectory();
    return isDirectory ? [...files, ...getAllFiles(name)] : [...files, name];
  }, []);
function replaceInDirectory(dirPath) {
  const extNames = [".js", ".html", ".css"];
  console.log(`  ···Replacing dir: ${dirPath}`);
  const files = getAllFiles(dirPath);
  for (let index = 0; index < files.length; index++) {
    const file = files[index];
    if (extNames.indexOf(path.extname(file)) === -1) continue;
    process.stdout.write(`  ···Replacing ${file} \r`);
    replaceInFile(file);
  }
}
// //
console.log("··· Rename start ···");
console.log(process.argv);
if (!distForderExists(folderName)) return false;
if (process.argv.length !== 4) {
  console.warn("!!!■ 参数必须指定原App名称和新App名称。");
  console.warn("!!!■ 例如: npm run renameApp apps-old apps-new");
  return false;
}
oldAppName = String(process.argv.slice(2, 3));
newAppName = String(process.argv.slice(3, 4));
console.log(`  ···Old AppName: '${oldAppName}'`);
console.log(`  ···New AppName: '${newAppName}'`);
const newAppPathAbs = path.resolve(newAppName);
console.log(`  ···New AppPath: '${newAppPathAbs}'`);
console.log(`  ···Remove folder: '${newAppPathAbs}'`);
fs.existsSync(newAppPathAbs) && fs.rmSync(newAppPathAbs, { recursive: true, force: true });
console.log(`  ···Copy ${folderName} to folder: '${newAppPathAbs}'`);
fs.cpSync(folderName, newAppPathAbs, { recursive: true });
console.log(`  ···Replace all appNames: '${newAppPathAbs}'`);
replaceInDirectory(newAppPathAbs);
console.log("··· Rename end ···");

调用：

node renameApp oldAppName newAppName