Vue环境变量

通常 vue 框架中变量设置分为node环境变量、VUE环境变量、系统变量三部分。

一、node环境变量

通过 node 命令语句传递的变量叫做 node 环境变量，例如 package.json 中 scripts 脚本。

1.1、package.json 中定义 scripts 脚本

"scripts": {
    "dev": "vue-cli-service serve", //开发模式
    "lint": "eslint --ext .js,.vue src",
    "build:prod": "vue-cli-service serve --mode production", // 生产模式
    // 启动服务，并设置模式为生产模式
    ...
  }

1.2、在程序中打印 node 环境参数

console.log('NODE_ENV:' + process.env.NODE_ENV)

1.3、在终端输入 npm run build:prod 启动程序，我们可以看到日志打印出了 production

总结：命令行中输入的 —mode production 在程序中通过 process.env.NODE_ENV 获取到了。至于为何命令行中定义的是 mode 参数，获取的是 NODE_ENV 目前暂不做分析。

二、VUE 环境变量

所谓的 VUE 环境变量即当前项目的环境变量，指在如下环境变量文件中定义的变量：

.env（全局）
.env.development（开发环境）
.env.production（生产环境）
.env.staging（测试）
vue 加载时先加载全局变量文件，在根据指定的模式加载对应的文件，如果存在相同的变量则覆盖。

1、设定环境变量
.env 中定义变量 VUE_APP_PORT

# port
VUE_APP_PORT = '9001'

在 .env.development 中定义变量 VUE_APP_ENV

VUE_APP_ENV = 'development'

在 .env.production 中定义变量 VUE_APP_ENV

VUE_APP_ENV = 'production'

2、程序中获取变量

console.log('port:' + process.env.VUE_APP_PORT)
console.log('VUE_APP_ENV:' + process.env.VUE_APP_ENV)

3、程序运行
当执行 dev 模式时，控制台中打印如下：

port:9001
VUE_APP_ENV:development
port:9001
VUE_APP_ENV:production

.env 文件中定义的变量在所有模式下都会加载，其它文件根据不同的模式加载不同的文件；先加载 .env 文件，后加载各模式文件，同时按顺序覆盖。

注意：

# the env variable must start with VUE_APP !!!

即 vue环境文件中设置的变量必须以 VUE_APP 开头，不然加载不到。

三、系统变量

系统中一些可以修改的配置项可以提取到系统变量文件中，方便后续修改。例如在 settings.js 文件中定义各种配置，方便后续修改。

1、在setting.js 中定义变量

module.exports = {
  title: 'admin',
  /**
   * @type {boolean} true | false
   * @description Whether show the settings right-panel
   */
  showSettings: true,
  ...
}

2、引入设置，并获取变量

// 引入变量文件
const defaultSettings = require('./src/settings.js')
//获取系统设置中定义的标题名称
const title = defaultSettings.title

总结：以上描述的只是一种思路，具体系统配置文件名称和路径都可以根据实际要求修改。

暂无