配置项目环境变量NODE_ENV

方式一：cross-env

const NODE_ENV = process.env.NODE_ENV;
下载插件

npm i cross-env -D

pro.env.js

module.exports = {
	NODE_ENV: '"production"',
  	ENV_CONFIG: '"dep"',
	BASE_API: '"http://xxxxx/admin"'
}

综合

const NODE_ENV = process.env.NODE_ENV;
switch (NODE_ENV) {
  case 'production':
    URL_A = 'https://aaaa';
    URL_B = 'https://xxx';
    URL_C = 'https://xxxz';
    break;
  case 'test':
    URL_A = 'https://aaaa1';
    URL_B = 'https://xxx1';
    URL_C = 'https://xxxz1';
    }

package.json

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "npm run dev",
    "dev": "npm run dev:test",
    "dev:dev": "cross-env NODE_ENV=develop vue-cli-service serve",
    "dev:test": "cross-env NODE_ENV=test vue-cli-service serve",
    "dev:prod": "cross-env NODE_ENV=production vue-cli-service serve",
    "build": "cross-env NODE_ENV= vue-cli-service build",
    "build:dev": "cross-env NODE_ENV=develop vue-cli-service build",
    "build:test": "cross-env NODE_ENV=test vue-cli-service build",
    "build:prod": "cross-env NODE_ENV=production vue-cli-service build",
  },

OR

方式二：cli脚手架–mode

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

在项目中配置环境config

在根目录新建 .env.prod/.env.dev/.env.test 在文件中添加如下代码

# NODE_ENV = 'test'
VUE_APP_XXX = 'test'
VUE_APP_BASE_URL= 'xxx'

这样在process.env在就会有你配置的内容

也可以这样配置

在src下新建config文件夹，注意环境名不是简写prod

// env.prod.js
module.exports = {
  // env: process.env.NODE_ENV,
  baseUrl: 'http://www.prod.com', // 项目地址
  baseApi: 'http://www.prod.com/api', // 本地api请求地址
  xxx: 'xxx'
};

config/index文件

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV);
console.log('===', config);
module.exports = config;

在main里引入，这样你在不同的环境就能取到不同的值了