vue如何使用process.env搭建自定义运行环境

NODE_ENV=development // 这里可以指定默认的环境是 development、production、test。
VUE_APP_ENV=friend  // 自定义的friend环境

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",

    "serve:f":"vue-cli-service serve --mode friend",
  },

let root = process.env.NODE_ENV;

let build = {
  development: {
    //开发人员本地调试开发环境
    publicPath:"/",
    outputDir:"xuzhou_shuiwu_web",
  },
  production: {
    publicPath:"./",
    outputDir:"xuzhou_shuiwu_web",
  },
  test: {
  },
  // 公网环境
  pro: {
  },
};
// export default build[root];

module.exports = build[root]

// let root = process.env.NODE_ENV;
let root = process.env.VUE_APP_ENV; // 自定义
let key = "/back";// 代理关键字
// 通用配置
let common = {
  key: key,
  host: "0.0.0.0",
  port: "8888",
  localhost: "0.0.0.0:8888",
  upload: key + "/file/uploadFile", // 文件上传地址
}
let ipConfig = {
  // 默认环境
  development: {
    serverIP: "http://1.1.1.1:8883/portal/",  
    logoutIp: "http://1.1.1.1:8883/portal/cas/logout/",

  },
  // 正式环境
  production: {
    serverIP: "http://1.1.1.1:8082/portal/", 
    logoutIp: "http://1.1.1.1:8082/portal/cas/logout/",
  },
  // 测试环境
  test: {
  },
  // 自定义环境
  friend: {
    serverIP: "http://1.1.1.1:8881/portal/",
    logoutIp: "http://1.1.1.1:8881/portal/cas/logout/",
  },
};

// export default Object.assign(common,ipConfig[root]);
console.log("当前环境：",root)
module.exports = Object.assign(common,ipConfig[root])

// import ip from "./ip"
// import build from "./build"

const config = {
    ip: require("./ip"), build: require("./build")
};
// export default config;

module.exports = config

const config = require('./public/config');
const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // publicPath: "./", //打包后的位置(如果不设置这个静态资源会报404) ./
  // vue-cli 3 已废弃baseUrl
  publicPath: config.build.publicPath,
  outputDir: config.build.outputDir, //打包后的目录名称
  assetsDir: "static", //静态资源目录名称
  devServer: {
    open: true, 
    // disableHostCheck: false,
    host: config.ip.host,
    port: config.ip.port,
    // https: false,
    // hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
    proxy: {
      [config.ip.key]: {
        target: config.ip.serverIP,  // jenkins
        changeOrigin: true,
        pathRewrite: {
          ["^" + config.ip.key]: ""
        }
      }
    }
    // before: app => {}
  }, // 第三方插件配置
  // webpack相关配置
  // chainWebpack: config => {
  //   // config.entry.app = ['./src/main.js'];
  //   config.resolve.alias.set("@", resolve("src")).set("#", resolve("public"));
  // },
  // webpack3,4的写法
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '@': resolve('src'),
        // '~': process.cwd(),
        '#': resolve('public'),
        // components: resolve('src/components'),
        // util: resolve('src/utils'),
        // store: resolve('src/store'),
        // router: resolve('src/router')
      }
    }
  },
  // pluginOptions: {
  //     // ...
  // },
  // 加载less加载器，路径：./public/css/common.less
  chainWebpack: config => {
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          // Provide path to the file with resources
          resources: ["./public/css/common.less", "./public/css/variable.less"]
        })
        .end();
    });
  }
};

const service = axios.create({
  baseURL: require("#/config").ip.key,
  timeout: 5000, // request timeout
  withCredentials: true,
});

location.href = config.serverIP + “cas/login?redirect=” + url