.env文件详解

.env配置文件

vue会根据 process.env.NODE_ENV 的值,自动加载对应的环境配置文件

  • .env 全局默认配置文件,在所有的环境中被载入;
  • .env.production 生产环境文件 production;
  • .env.development 开发环境文件 development;
  • .env.test/.env.staging 测试环境/预发布环境文件 test/staging;

配置文件内容

  • #注释
  • 自定义属性名以VUE_APP_开头,比如VUE_APP_xxx = “变量”
#端口号
port = 8080
# 当前环境
NODE_ENV = 'development'
#ENV = 'development'

# 页面标题
VUE_APP_TITLE = 若依管理系统
 
# 请求基地址
VUE_APP_BASE_API = 'https://ehapi2.erui.com'

# 上传图片的地址
VUE_APP_IMG_API = 'https://file01.ehewon.com'

process.env

  • process.env 是 Node.js 中的一个全局对象,用于获取当前进程的环境变量;
  • process.env.xxxx
    在这里插入图片描述
// 获取当前的环境的请求基地址
process.env.VUE_APP_BASE_API

NODE_ENV

  • NODE_ENV 是一个常用的环境变量,用于确定 Node.js 运行时的当前环境;
  • process.env.NODE_ENV
  • production 生产环境;
  • development 开发环境;
  • test/staging 测试环境;
if (process.env.NODE_ENV === 'development') {
  // 在开发环境执行的逻辑
} else if (process.env.NODE_ENV === 'production') {
  // 在生产环境执行的逻辑
} else if (process.env.NODE_ENV === 'test') {
  // 在测试环境执行的逻辑
} else {
  // 在其他环境执行的逻辑
}

package.json中的script指令

  "scripts": {
    "dev": "vue-cli-service serve",
    "lint": "eslint --ext .js,.vue src",
    "build:prod": "vue-cli-service build --mode production",
    "build:pre": "vue-cli-service build --mode staging",
    "build:dev": "vue-cli-service build --mode development",
  },
npm run 指令 === 执行了对应的命令
npm run dev  ===  vue-cli-service serve

在package.json文件中的scripts配置

// 默认配置
  "scripts": {
    "dev": "vue-cli-service serve", // 默认读取 .env.development文件,会将process.env.NODE_ENV设置为development;
    "build": "vue-cli-service build", // 默认读取 .env.production文件,会将process.env.NODE_ENV设置为production;
    "test": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
指令环境/模式执行的文件
npm run dev/servedevelopment.env.development
npm run buildproduction.env.production
npm run testtest/staging.env.test/.env.staging
  • 通过传递 - -mode 选项的参数为命令行覆写默认的模式;
    • vue-cli-service --mode dev 指定读取 .env.dev 文件,加载里面的变量;
  "scripts": {
    "build:prod": "vue-cli-service build --mode production",
    "build:pre": "vue-cli-service build --mode staging",
    "build:dev": "vue-cli-service build --mode development",
}
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值