vue项目中常见的两种环境变量配置

vue-cli 安装

npm install -g @vue/cli
不同环境需要不同配置时候

脚手架默认配置是

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",

 "test": "vue-cli-service serve --mode test",

 "build:wis": "vue-cli-service build --mode wis",
"lint": "vue-cli-service lint",

第一种方式

.env.test
.env.wis
.env.development
.env.production

第二种方式

  runConf = require(`./${NODE_ENV}`)(); 根据 环境变量加载配置文件

test.js
wis.js
development.js

production.js
其中 如果直接运行  比如 serve ，开发模式   webpack会自动为开发模式优化打包，但是此时的process.env.NODE_ENV 是undefined（main.js) 

如果想要设置 可以这样做

1.添加命令 并且在最后设置 --model xxx   比如：

"test": "vue-cli-service serve --mode test"
2.在package.json 同级目录 添加 .env.test 文件 （.env.xxx)根据 你传入的mode

3.在这个文件中，可以做如下配置

NODE_ENV = "test"
VUE_APP_ENV = "test"
VUE_APP_NAME = "ZZZ"

注意 页面引用值 需要加前缀：VUE_APP_

const service = axios.create({

  baseURL: process.env.VUE_APP_BASE_API,

  // withCredentials: true, // send cookies when cross-domain requests

  timeout: 10000, // request timeout

});

config.js 根据参数配置

 publicPath: process.env.VUE_APP_URL_ENV === "wis" ? "/dialogue-robot/" : "/",

'use strict';

// 环境配置
let runConf = {};
// 固定配置
let runConfNative = {};
// 自定义process字段
const processList = ['frame', 'imHost', 'corsOrigin', 'XFrameOptions', 'staticResourceHost'];

// 根据环境自动获取对应配置
const NODE_ENV = process.env.NODE_ENV || 'local';
try {
  runConf = require(`./${NODE_ENV}`)();
  // 每次重启，都生成不一样的hash值
  runConf.PAGE_HASH = new Date().getTime();
  // 自定义process字段
  processList.forEach(e => {
    if (process.env[e]) {
      runConf[e] = process.env[e];
    }
  });
} catch (err) {
  console.error(`[NodeJs]：未找到 ${NODE_ENV} 对应环境的配置`);
  process.exit(1);
}

module.exports = think.util.extend(runConfNative, runConf);

然后通过 process.env.XXX 读取

我的使用方法是 创建一些列配置文件 在里面写入需要的配置

 然后在index.js 里面动态引入 导出

const env = process.env.VUE_APP_ENV
const obj = require(`./${env}.config.js`)
module.exports = obj
之后便可以像普通文件一样引入配置(根据你的不同命令获得不同配置）

import xx from './config/index.js'

console.log(xx.name)