代码片段:Vue配置生产环境参数和开发环境参数

2 篇文章 0 订阅
1 篇文章 0 订阅

前言:
以前配置不同环境参数很简单,只需要在dev.env.js文件和prod.env.js文件下配好就行了,大概是酱紫的:
在这里插入图片描述
然后使用 process.env.BACKEND_URI_PREFIX 就可以在全局使用环境配置参数了。
但是!!!,最近重新写代码发现,这样用不行了,听说是Vue更新, 我,,,一个后端Coder有心无力啊,百度了一下也不是很明白前端大佬的思路,于是乎:
在这里插入图片描述
不给我用,就自己写一个文件管理吧,大概是像酱紫的:
文件:custom_config.js

//开发环境系统变量
let dev = {
  API_DOMAIN:'http://a.universe.com',
  QINIU_BUCKET:'test',
  QINIU_IMAGE_DOMAIN: 'http://test.abc.cn/',
  QINIU_ACCESS_KEY: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
  QINIU_SECRET_KEY: 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
};

//生产环境系统变量
let prod = {
  API_DOMAIN:'http://api.abc.com',
  QINIU_BUCKET:'image',
  QINIU_IMAGE_DOMAIN: 'http://img.abc.cn/',
  QINIU_ACCESS_KEY: 'xxxxxxxxxxxxxxxxxxxxxx',
  QINIU_SECRET_KEY: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
};

let env = process.env.NODE_ENV;

export function get(cfg) {
  if (env === "development"){
    return dev[cfg];
  }
  if (env === "production"){
    return prod[cfg];
  }
}

然后在index.js文件中export一下:

import * as $config from './custom_config';
export {
  $config
}

再然后,在你需要使用配置的地方引用一下:

import {$config} from '../tool/index';

let accessKey = $config.get("QINIU_ACCESS_KEY");

这样就可以了,,,相对于process.env.QINIU_ACCESS_KEY,也麻烦不到哪儿去。

注: process.env.QINIU_ACCESS_KEY这种用法不是说完全不能用,笔者发现在router/index.js文件中可以使用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值