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

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

development：在 vue-cli-service serve 时使用。

production：在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。

test：在 vue-cli-service test:unit 时使用。

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

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

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

.env：在所有的环境中被载入
.env.local：在所有的环境中被载入，但会被 git 忽略
.env.[mode]：只在指定的模式中被载入
.env.[mode].local：只在指定的模式中被载入，但会被 git 忽略

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

总结

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

原文地址：https://blog.csdn.net/GeniusXYT/article/details/115627973