vue/cli 3.0 文件配置全局环境变量

vue/cli 3.0 文件配置全局环境变量

在vue/cli中可在全局任何位置直接使用process.env.NODE_ENV 获取到当前为生产环境(production)还是开发环境(development)。若只需要获取该信息则可忽略以下文档。

方式一 配置根目录/config/index.js

1.1 在根目录创建文件 /config/index.js

命名	说明	加载
development	开发环境	npm run serve
production	生产环境	npm run build
test	测试环境	npm run test

// 全局的config配置
const modeUrlObj = {
  // 生产环境
  production: {
    baseURL: "",
    authBaseURL: ""
  },
  // 开发环境
  development: {
    baseURL: "/api",
    authBaseURL: ""
  },
  // 测试环境
  test: {
    baseURL: "/api",
    authBaseURL: ""
  }
};
export default modeUrlObj[process.env.NODE_ENV];

1.2 使用时会根据打包时的命令自动判断当前环境的config

/**
 * 接口域名的管理
 */
import config from "../../config";
const base = {
  //基本请求路径
  baseUrl: config.baseURL
};

export default base;

方式二 根目录创建相应名称的文件区分

2.1 根目录创建环境变量文件配置

必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件

命名	说明	加载
.env	全局默认，任何环境都加载合并
.env.development	开发环境下的配置文件	npm run serve
.env.production	生产环境下的配置文件	npm run build

2.2 文件内容
属性名必须以VUE_APP_开头，比如VUE_APP_XXX
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

.env.development(开发环境)

NODE_ENV = 'development'
VUE_APP_BASE_API = 'https://demo.cn/api'
VUE_APP_URL = 'https://wechat-timg.oss-cn-hangzhou.aliyuncs.com/demo'

.env.production(生产环境)

NODE_ENV = 'production'
VUE_APP_BASE_API = 'https://demo.cn/api'
VUE_APP_URL = 'https://wechat-timg.oss-cn-hangzhou.aliyuncs.com/demo'

2.3 使用
通过process.env.VUE_APP_XXX获取环境变量
（全局属性，任何地方均可使用）

data():{
    return{
        url:process.env.VUE_APP_URL
    }
}