vue cli3 环境变量配置,以及分环境打包配置

vue cli3环境变量配置相对于cli2来说相对简单

环境变量模式官网上有介绍 https://cli.vuejs.org/zh/guide/mode-and-env.html

我是根据自己的项目总结出来简单几步

一、环境变量配置

1、新增文件

在项目根目录下新增环境变量文件,我是配置了三个环境变量 .env.dev  .env.test  和  .env.prod,可根据项目需要新增

2、配置文件 (格式 “键=值”)

  • NODE_ENV - 会是 "development""production" 或 "test" 中的一个。具体的值取决于应用运行的模式。 
  1. development 用于 vue-cli-service serve

  2. production 用于 vue-cli-service build 和 vue-cli-service test:e2e

  3. test 用于 vue-cli-service test:unit

  • VUE_APP_BASE_API 是自定义环境变量
    // .env.dev 本地开发环境
    
    NODE_ENV = 'development'
    VUE_APP_BASE_API = ''
    
    // .env.prod 生产环境
    
    NODE_ENV = 'production'
    VUE_APP_BASE_API = 'http://123.com/'

     

3、环境变量使用

可通过 process.env.自定义环境变量名   直接调用,例如:

baseURL: process.env.VUE_APP_BASE_API

 

二、分环境打包配置 package.json

如图  :

  "scripts": {
    "dev": "vue-cli-service serve --open --mode dev",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },

第一步创建的环境变量文件  .env.test 对应 --mode test  脚本配置:"build:test": "vue-cli-service build --mode test"

以次类推,把环境变量和文件一一对应,执行脚本命令,就可以按需打包出不同环境的代码  

 

是不是很简单,有问题欢迎留言,大家共同进步

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值