【vue】项目环境变量配置及其思考

vue项目开发过程中,经常会遇到开发、测试、生产环境配置不同的情况,这个时候就会用到环境变量

一、环境变量怎么配置


一个环境文件只包含环境变量的"键=值"对:

(1)标识当前所处的环境模式

NODE_ENV可在配置文件中标识当前所处的模式

  • development 开发环境模式,默认用于 vue-cli-service serve
  • production 生产环境模式,默认用于 vue-cli-service build

(2)环境变量怎么定义

默认有三种类型的变量

NODE_ENV:标识当前所处的环境模式

BASE_URL:应用会部署到的基础路径,和 vue.config.js中的 publicPath 选项相符

VUE_APP_:以此开头,用于自定义环境变量

访问方式:

三种变量都是在前面添加process.env.

js 复制代码
console.log(process.env.NODE_ENV)
console.log(process.env.BASE_URL)
console.log(process.env.VUE_APP_POINT_URL)

示例:

下面以三个环境配置不同的埋点地址链接为例:

首先,在根目录新建三个文件

.env.development

js 复制代码
NODE_ENV='development'
VUE_APP_POINT_URL='http://develop.point.com.cn'

.env.test

js 复制代码
NODE_ENV='production'
VUE_APP_POINT_URL='http://test.point.com.cn'

.env.production

js 复制代码
NODE_ENV='production'
VUE_APP_POINT_URL='http://production.point.com.cn'

其次,通过process.env.VUE_APP_POINT_URL在代码中使用变量

最后,在package.json中,新增一条使用.env.test环境变量的打包命令

"start": "vue-cli-service serve" (默认是development模式,使用.env.development中环境变量)

"build": "vue-cli-service build"(默认是production模式,使用.env.production中环境变量)

"build:test": "vue-cli-service build --mode test" (配置的test模式,使用.env.test中环境变量)

json 复制代码
{
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint",
  },
}

按照上面常规的做法,不同的环境需要前端使用不同的命令打不同的环境包

至此,环境变量的配置讲完了。

二、一些项目上的思考


(1)后端同事说他也想看到前端的配置,并且可以在需要的时候做调整

将不同的配置,改写对象挂载在window上

放在成不同的js中,文件放在public目录下,才可以解决不被打包编译的问题

然后配置不同的环境模式变量,采用动态script脚本加载不同的对象

按这种处理办法,后端可以看到不同环境变量的js文件,却还要前端为不同环境打不同的包

(2)进一步思考,能不能只打一次包

完全脱离上面常规的环境变量配置方式,重新思考,

将所有的标识环境和环境变量的数据全部放到一个js中处理,

根据不同的环境配置不同的环境对象,挂载在window上

示例:

首先,写一个配置文件config.js,并且该文件放在public目录下

js 复制代码
// // 环境控制变量 development  test  production
const environment = 'test'

const configObj = {
  'development': {
    VUE_APP_POINT_URL: 'http://develop.point.com.c'
  },
  'test': {
    VUE_APP_POINT_URL: 'http://test.test.com.c'
  },
  'production': {
    VUE_APP_POINT_URL: 'http://production.point.com.c'
  }
}

window.config = configObj[environment]

然后,在index.html中引入

js 复制代码
  <script src="<%= BASE_URL %>config/test.js"></script>

使用方式,就是常规的window对象获取数据了

js 复制代码
console.log(window.config.VUE_APP_POINT_URL)

总结,以上我个人思考出来的解决办法应该有几个优点

  • 应该比常规的环境变量配置好理解
  • 应该比常规的环境变量好获取数据
  • 相关的逻辑也聚合在一起
  • 不用修改打包命令
  • 方便必要的时候,后端可以直接做修改
相关推荐
GISer_Jing7 分钟前
Vue3状态管理——Pinia
前端·javascript·vue.js
web150854159351 小时前
vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题
vue.js·阿里云·webrtc
一个处女座的程序猿O(∩_∩)O3 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
迷糊的『迷』4 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot
web135085886354 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
陈大爷(有低保)4 小时前
uniapp小案例---趣味打字坤
前端·javascript·vue.js
cronaldo914 小时前
研发效能DevOps: Vite 使用 Element Plus
vue.js·vue·devops
百罹鸟5 小时前
【vue高频面试题—场景篇】:实现一个实时更新的倒计时组件,如何确保倒计时在页面切换时能够正常暂停和恢复?
vue.js·后端·面试
Java_慈祥5 小时前
慈様や 前端学习导航👩🏻‍🚀🚀
前端·javascript·vue.js
编程百晓君7 小时前
一文解释清楚OpenHarmony面向全场景的分布式操作系统
vue.js