前言

刚好最近把 vue-cli2 / vue-cli3 / vite+vue3.0 的环境区分都来了一遍，特此记录。下文的方法都是自己使用亲测有效的，不过也不是唯一的方法。

vue-cli2

vue-cli2生成的项目目录下有build、config这两个目录，项目的webpack配置和运行环境的区分就是在这两个文件夹下去处理的；

1.下载cross-env

1
npm install cross-env --save-dev

2.修改pageage.json中script

增加build:test、build:uat

1
2
3
4
5
6
7
8
"scripts": {
  ...
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production ENV_CONFIG=test node build/build.js",
  "build:uat": "cross-env NODE_ENV=production ENV_CONFIG=uat node build/build.js",
  ...
},

3.更改各种环境下的baseUrl

在config -> dev.env.js

1
2
3
4
5
6
7
8
9
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API: '"http://localhost:8083"'
})

在config -> prod.env.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use strict'

let API = '"https://prod/"' // prod 

if (process.env.ENV_CONFIG === 'test') {
    API = '"https://test/"' // test
}

if (process.env.ENV_CONFIG === 'uat') {
    API = '"https://UAT/"'  // uat
}

module.exports = {
    NODE_ENV: '"production"',
    API: API
}

定义axios的 baseUrl

1
2
3
4
5
6
7
8
9
10
11
12

...

// create an axios instance
const service = axios.create({
    baseURL: process.env.API, // api的base_url
    timeout: 500000, // request timeout
    withCredentials: true
})

...

vue-cli3

vue-cli3生的项目webpack的配置文件都是影藏起来的，提供了vue.config.js去配置一些webpack。

1.修改pageage.json中script

1
2
3
4
5
6
7
8

"scripts": {
  ...
  "build": "vue-cli-service build", 
  "build:test": "vue-cli-service build --mode test",
  "build:uat": "vue-cli-service build --mode uat",
  ...
},

2.新建.env文件

在根目录下建 .env.test、.env.uat 两个文件, 用VUE_APP_来增加环境区分标识

1
2
3
4
5
6
// .env.test

NODE_ENV = 'production'
VUE_APP_TITLE  = 'test'
...

1
2
3
4
5
6
// .env.uat

NODE_ENV = 'production'
VUE_APP_TITLE  = 'uat'
...

3.设置baseUrl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// base.url.js
const BASE_URL = (function() {
  let baseUrl = '';
  switch (process.env.NODE_ENV) {
    case 'development':
      // 本地的请求url
      baseUrl = 'http://localhost:8080/api';
      break;

    case 'production':
      // 生产环境url
      baseUrl = 'https://prod/api';

      if (process.env.VUE_APP_TITLE === 'test') {
        // 测试环境地址
        baseUrl = 'https://test/api';
      }

      if (process.env.VUE_APP_TITLE === 'uat') {
        // uat 环境地址
        baseUrl = 'https://uat/api';
      }
      break;
  }

  return baseUrl;
})();

export default BASE_URL;

1
2
3
4
5
6
7
8
9
10
11
...
import BASE_URL from './base.url';
...

let { baseUrl } = BASE_URL;

axios.defaults.timeout = 500000;
axios.defaults.baseURL = baseUrl;

...

vite+vue3.0

vite+vue3.0做环境区分是最简单的。

1.修改pageage.json中script

1
2
3
"build": "vite build --mode dev",
"build:test": "vite build --mode test",
"build:uat": "vite build --mode uat"

2.新建环境文件

在根目录下建 .env.[环境名]，然后打开文件写入以VITE_为开头的key

  • .env.dev
1
2
VITE_ENV='dev'
VITE_BASE_URL='http://localhost:3001/api'
  • .env.prod
1
2
VITE_ENV='prod'
VITE_BASE_URL='http://prod/api'
  • .env.test
1
2
VITE_ENV='test'
VITE_BASE_URL='http://test/api'

3.设置baseUrl

vite这里不再是从process.env获取环境变量了；

1
axios.defaults.baseURL = import.meta.env.VITE_BASE_URL;