【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)

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

  • 应该比常规的环境变量配置好理解
  • 应该比常规的环境变量好获取数据
  • 相关的逻辑也聚合在一起
  • 不用修改打包命令
  • 方便必要的时候,后端可以直接做修改
相关推荐
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
midsummer_woo12 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
喝拿铁写前端13 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
豆豆(设计前端)14 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
苦瓜若叶睦14 小时前
Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项
vue.js
springfe010115 小时前
模块与组件区别
javascript·vue.js
结衣结衣.16 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
哎呦薇16 小时前
从开发到发布:手把手教你将Vue组件上传npm
前端·vue.js
用户38022585982416 小时前
vue3源码解析:生命周期
前端·vue.js·源码阅读
markyankee10119 小时前
Vue-Router:构建现代化单页面应用的路由引擎
前端·vue.js