前端开发中使用build.js完成区分环境的打包配置

一，利用process新建环境变量

对应的代码文件：
.env

# 公共环境配置
# VUE_APP_VERSION默认值,都会执行的文件
VUE_APP_VERSION = "---"

.env.development

# 开发环境配置
ENV = 'development'
NODE_ENV = 'development'
VUE_APP_VERSION = "---"
VUE_APP_baseUrl = 'http://localhost:3000/dcxt/shop/'

.env.testing

# 测试环境配置
ENV = 'testing'
NODE_ENV = 'testing'
VUE_APP_baseUrl = '测试环境的接口地址'

.env.pre

# 预发布环境配置
ENV = 'pre'
NODE_ENV = 'pre'
VUE_APP_baseUrl = '预发布环境的接口地址:5001'

.env.production

# 生产环境配置
ENV = 'production'
NODE_ENV = 'production'
VUE_APP_baseUrl = '生产环境的接口地址'

二，封装axios的时候，需要使用这个base_Url

为了打包运行后看当前页面的访问路径，我在main.js中又写了这句：

console.log("当前请求的基本地址", process.env.VUE_APP_baseUrl);

三，当开发时，npm run serve

这时候，肯定执行的是.env.development，所以控制台打印的是：

到这里过，开发过程中是用不上build.js的，只有需要打包部署的时候才会用得上。

四，创建build.js文件

需要先安装两个npm包：

npm i cross-env

npm i shelljs

然后build.js的具体代码:

const shell = require("shelljs"); //执行打包代码
const inquirer = require("inquirer"); //问询者
const chalk = require("chalk"); //更改字体颜色
const pkg = require("../package.json"); //获取版本信息
const fs = require("fs"); //文件操作模块

const platform = new Map([["测试demo通用版", "HDD"]]);
const env = new Map([
  ["测试环境", "testing"],
  ["准生产环境", "pre"],
  ["生产环境", "production"]
]);

const build = async () => {
  const version = pkg.version;
  const res = await inquirer.prompt([
    {
      type: "list",
      name: "platform",
      message: "请选择你要部署的版本？",
      choices: ["测试demo通用版"]
    },
    {
      type: "list",
      name: "env",
      message: "请选择你要部署的环境？",
      choices: ["生产环境", "准生产环境", "测试环境"]
    }
  ]);
  //这个转化出来时，键值对的键是platform，值是选择的内容
  console.log(
    chalk.green(
      `您要打包的是 ******* ${res.platform}(${version})【${res.env}】*******`
    )
  );

  //二次确认
  const res2 = await inquirer.prompt([
    {
      type: "confirm",
      name: "secondCheck",
      message: "确定以上信息无误?",
      default: true
    }
  ]);

  if (!res2.secondCheck) {
    return;
  }

  const envName = env.get(res.env);
  const platName = platform.get(res.platform);

  console.log(
    `cross-env VUE_APP_PlATFORM=${platName} BABEL_ENV=${envName}
    VUE_APP_VERSION=${version} ./node_modules/.bin/vue-cli-service
     build --mode=${envName}`
  );

  // exec括号内不能换行，不然环境变量会读取不到,在这里又在process中新建了这些变量
  await shell.exec(
    `cross-env BABEL_ENV=${envName} VUE_APP_VERSION=${version} VUE_APP_PlATFORM=${platName} ./node_modules/.bin/vue-cli-service build --mode=${envName}`
  );

  const projectName = pkg.name;
  const outerDir = `dist/${projectName}_${platName}_${envName}`;

  console.log(chalk.green(`编译完成，请发布${outerDir}文件夹!`));
};
build();

五，对应的vue.oconfig.js中的配置

const pkg = require("./package.json");

和

  publicPath: "",   //项目部署的地址(前面是www.服务器.com)拼接这里的地址，也就是说静态资源从这里找
  outputDir:  process.env.NODE_ENV==="production"?`dist/${pkg.name}_${process.env.VUE_APP_PlATFORM}_${process.env.NODE_ENV}`
  :`dist/${pkg.name}_${process.env.VUE_APP_PlATFORM}`,    //build打包之后的文件夹名称
  assetsDir: "./",        //打包之后的静态资源的相对于outputDir的位置

六，在package.json中的配置

    "build": "node script/build.js",

这样，一但npm run build，就会执行build.js文件。
从而达到这样的效果：