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"

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

 

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