vue项目配置多种环境 process.env.NODE_ENV

在 Vue 项目中，我们可以通过配置 vue.config.js 文件来设置多个 process.env.NODE_ENV。以下是一个详细的示例：

vue2项目 vue-cli 3

1.首先，在项目根目录下创建一个 vue.config.js 文件，如果不存在的话。
2.打开 vue.config.js 文件，然后在其中添加以下代码：

module.exports = {  
 // 其他配置...  
 configureWebpack: {  
   // 添加多个 NODE_ENV 配置  
   env: {  
     development: {  
       NODE_ENV: 'development',  
     },  
     staging: {  
       NODE_ENV: 'staging',  
     },  
     production: {  
       NODE_ENV: 'production',  
     },  
   },  
 },  
}; 

上述代码中，我们使用 env 对象来配置多个 NODE_ENV。每个对象的键表示环境名称，值为对应的 NODE_ENV 值。

3.根据需要，你可以在 package.json 文件中的 scripts 部分添加相应的脚本命令，例如：

"scripts": {  
 "start": "vue-cli-service serve --env development",  
 "stage": "vue-cli-service serve --env staging",  
 "build": "vue-cli-service build --env production",  
}

上述代码中，我们为每个环境配置了相应的脚本命令，通过添加 --env 参数来指定运行时的环境。

4.最后，运行对应的脚本命令，项目将根据指定的环境配置运行。例如：

npm run start //--env development  
npm run stage //--env staging  
npm run build //--env production  

通过以上配置，你可以在 Vue 项目中使用多种 process.env.NODE_ENV 环境。

vue2项目 vue-cli 3

使用 --mode

scripts": {
    "serve": "vue-cli-service serve --mode development",
    "serve:test": "vue-cli-service serve --mode staging",
    "serve:pro": "vue-cli-service serve --mode production",

对应文件中

.env.development
.env.production
.env.staging

# 生产环境配置
NODE_ENV = 'production'

# QuickAdmin管理系统/生产环境
VUE_APP_BASE_API = ''
VUE_APP_BASE_URL = 'https://api.xxx.com'
VUE_APP_WORK_PATH = 'https://www.xxx.com/work'

中配置不同环境对应的接口域名地址

vue2项目 vue-cli 2

1、使用cross-env

npm install --save-dev cross-env

"scripts": {
	"build:dev": "cross-env env_config=dev node build/build.js",
	"build:test": "cross-env env_config=test node build/build.js",
	"build:prod": "cross-env env_config=prod node build/build.js"
}

2、config目录添加对应环境的xxx.env.js文件

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
	NODE_ENV: '"development"',
	env_config: '"dev"',
	BASE_URL: '"http://dev.com"', // 本地环境访问接口
})

test.env.js

'use strict'
module.exports = {
	NODE_ENV: '"production"',
	env_config: '"test"',
	BASE_URL: '"http://test.com"', // 测试环境访问接口
}

prod.env.js

'use strict'
module.exports = {
	NODE_ENV: '"production"',
	env_config: '"prod"',
	BASE_URL: '"http://prod.com"', // 生产环境访问接口
}

env.js中的参数可以按照需求以键值对的方式自定义

3、修改打包配置build/webpack.prod.conf.js 根据env_config变量动态引入env.js

// const env = require('../config/prod.env')
const env = require(`../config/${ process.env.env_config ? process.env.env_config : 'prod'}.env`)

4、自定义变量的使用，可以通过process.env来获取全局变量

例如：axios设置baseUrl

import Vue from 'vue'
import Axios from 'axios'
// 不需要跨域的情况可以直接这样设置baseUrl
Axios.defaults.baseURL = process.env.BASE_URL
// 若是本地调试需要跨域就要判断是development还是production，
Axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '' : process.env.BASE_URL

或者
pro.env.js

'use strict';
// 演示地址
let VUE_APP_BASE_API_URL = '"http://43.140.247.202:10006"';
let BASE_URL = '123'

// 测试地址
if (process.env.env_config == 'dev') {
   NODE_ENV: '"development"',
   BASE_URL: '"http://prod.com"', 
}
...
// 上线地址
if (process.env.env_config == 'prod') {
   NODE_ENV: '"production"',
   BASE_URL: '"http://prod.com"', 
}

module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_BASE_API_URL,
  KE_FU_URL,
  GIT_URL,
  DEV_URL,
};

以上便是通过cross-env配置vue-cli2环境变量的分享，希望能帮到大家，谢谢