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

目录一、vue-cli项目下默认有三种模式二、可以通过环境文件来指定默认环境变量和自定义环境变量三、执行自定义环境文件，进入自定义环境四、配置举例和应用场景vue-cli3总结一、vue-cli项目...

目录

一、vue-cli项目下默认有三种模式

对应的 process.env.NODE_ENV 值分别为 development、production、test。

二、可以通过环境文件来指定默认环境变量和自定义环境变量

环境文件有一下几个类型：

mode是某个模块名，如 在src创建 .env.friend 文件，内容：

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

注意自定义的变量名必须以 VUE_APP_ 开头才能被webpack.DefinePlugin 静态嵌入，通过process.env.VUE_APP_xxx 来访问；执行此文件就相当于“进入”friend环境了。

三、执行自定义环境文件，进入自定义环境

在package.json中添加

 "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",
 },

执行 npm run serve:f，此时process.env.NODE_ENV为development， process.env.VUE_APP_ENV为friend，利用process.env.VUE_APP_ENV定义ip等信息即可，即可访问后台朋友的接口了。

四、配置举例和应用场景 vue-cli3

public/config/build.js，这里未使用自定义环境（未用process.env.VUE_APP_ENV）

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]

public/config/ip.js

// 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])

public/config/index.js

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

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

module.exports = config

vue.config.js

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();
  });
 }
};

axure封装request.js 部分

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

在单点登录中，可以在router.js中判断无权限跳转时使用：

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。