实习随笔-10、process.env前端环境变量配置教程

12 篇文章 1 订阅

一、实现原理

采用nodejs顶层对象中的process.env(进程环境,返回一个包含用户环境信息的对象。)属性,根据各个环境的配置文件区分和切换环境

二、具体操作(以vue项目为例)

1、安装依赖

npm install process

2、在根目录新增区分环境的文件

例如:
开发环境:.env.dev
预发布环境:.env.pre
生产环境:.env.product
.dev

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
/*请求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"
/*首页地址*/
VUE_APP_URL="http://xxx"
/*proxy代理地址*/
VUE_APP_PROXYURL='http://xxx'

.pre

NODE_ENV = 'pre'
VUE_APP_TITLE = 'pre'
/*请求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"
/*首页地址*/
VUE_APP_URL="http://xxx"
/*proxy代理地址*/
VUE_APP_PROXYURL='http://xxx'

.prod

NODE_ENV = 'prod'
VUE_APP_TITLE = 'prod'
/*请求接口地址*/
VUE_APP_INTERFACE_URL="https://xxx"
/*首页地址*/
VUE_APP_URL="http://xxx"

3、设置项目启动时默认的环境

修改package.json文件

package.json
"scripts": {
  "serve": "vue-cli-service serve --mode dev --open",
    "build": "vue-cli-service build --mode production",
    "product": "vue-cli-service build --mode dev --watch",
    "dev": "vue-cli-service build --mode dev",
    "pre": "vue-cli-service build --mode pre",
    "lint": "vue-cli-service lint"
  },

4、查看环境是否配置成功

入口文件main.js打印当前环境,但运行npm run dev(/product/pre)时,就会打印当前环境

console.log(process.env.NODE_NEV)
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值