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

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

  • 应该比常规的环境变量配置好理解
  • 应该比常规的环境变量好获取数据
  • 相关的逻辑也聚合在一起
  • 不用修改打包命令
  • 方便必要的时候,后端可以直接做修改
相关推荐
江城开朗的豌豆5 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆6 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
江城开朗的豌豆19 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山27 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
daols887 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
行云&流水10 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
三水气象台10 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
盛夏绽放11 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel