VueCLI 通过process.env配置环境变量

前言

• 我们在做vue或者react单页应用的时候,会发现配置文件里有procsss.env字段
• 依靠环境变量,标记服务器,这样就可以根据不同的环境,配置不同环境下我们所需要的东西。
  例如：后端接口的域名。

理解node环境变量process.env

首先,我们需要理解node中的process和process.env是什么,点击此处进入Node.js中文网进行查看
在文件夹中新建process.js文件,进行操作,理解process.env

process（进程）

• process 对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制。 作为全局变量，它始终可供 Node.js 应用程序使用，无需使用 require()。
  它也可以使用 require() 显式地访问const process = require('process')

在process.js文件中console.log(process),并在终端中执行node process.js可以打印出如下信息

信息过于繁琐,就不在此处全部展示，读者可以自行获取该数据。
如上就可以看到 process是node的全局变量，并且process有env这个属性。

process.env(环境变量)

在process.js文件中console.log(process.env)

• process.env属性会返回包含用户环境的对象。通俗来讲，该属性可以返回项目运行环境的信息。

此对象的示例如下所示：

{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'nodejscn',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/nodejscn',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/nodejscn',
  LOGNAME: 'nodejscn',
  _: '/usr/local/bin/node'
}

1. 可以修改此对象，但这些修改不会反映到 Node.js 进程之外，或者（除非明确地要求）反映到其他 Worker 线程。 换句话说，以下示例不会起作用：

$ node -e 'process.env.foo = "bar"' && echo $foo

以下示例则会起作用：

process.env.foo = 'bar';
console.log(process.env.foo);

2. 在 process.env 上为属性赋值会隐式地将值转换为字符串。 不推荐使用此行为。 当值不是字符串、数字或布尔值时，Node.js 未来的版本可能会抛出错误。

process.env.test = null;
console.log(process.env.test);
// => 'null'
process.env.test = undefined;
console.log(process.env.test);
// => 'undefined'

3. 使用delete 可以从 process.env 中删除属性。

process.env.TEST = 1;
delete process.env.TEST;
console.log(process.env.TEST);
// => undefined

4. 在 Windows 操作系统上，环境变量不区分大小写。

process.env.TEST = 1;
console.log(process.env.test);
// => 1

5. 除非在创建 Worker 实例时显式地指定，否则每个 Worker 线程都有自己的 process.env 副本（基于其父线程的 process.env，或者指定为 Worker 构造函数的 env 选项的任何内容）。 对于 process.env 的更改在 Worker 线程中是不可见的，并且只有主线程可以做出对操作系统或原生插件可见的更改。

VueCLI中环境变量和模式

点击进入Vue CLI 官方文档中进行查看

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

1. development 模式用于 vue-cli-service serve
2. production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
3. test 模式用于 vue-cli-service test:unit

你可以通过传递 --mode 选项参数为命令行覆写默认的模式

"dev-build": "vue-cli-service build --mode development",

不同的模式会有不同的环境变量NODE_ENV

在 development 模式下 NODE_ENV 的值会被设置为 "development"
在 development 模式下 NODE_ENV 的值会被设置为 "production"

在根目录下新建下列文件可以设置环境变量

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。
比如，如果你在项目根目录创建一个名为 .env.development 的文件，
那么在这个文件里声明过的变量就只会在 development 模式下被载入。

环境加载属性 特定环境文件高于一般环境文件的优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

环境文件 内容书写 一个环境文件只包含环境变量的“键=值”对：

FOO=bar
VUE_APP_SECRET=secret

环境文件 配置变量

只有以VUE_APP_开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

因此我们添加变量的时候都以VUE_APP_*这样的形式

VUE_APP_BASE_URL = 'http://xxx.com/web/'
VUE_APP_WSR_URL = 'ws://xxx.com/web/'

除此之外,还有两个特殊的变量
NODE_ENV - 会是 "development"、"production" 或 "test"中的一个。具体的值取决于应用运行的模式。可以自行修改

NODE_ENV="可以进行修改"  

BASE_URL - 会和 vue.config.js中的publicPath选项相符，即你的应用会部署到的基础路径。

实战

vue cli 新建项目 创建 .env .env.development .env.production 文件

配置环境变量

.env

VUE_APP_BASE_URL = '.env 下的接口地址'

.env.development

VUE_APP_BASE_URL = '.env.development 下的接口地址'

.env.production

VUE_APP_BASE_URL = '.env.production 下的接口地址'

在App.vue文件中查看环境变量

console.log(process.env)
console.log('接口地址',process.env.VUE_APP_BASE_URL)

开发环境

npm run serve

.env 环境变量被覆盖 当前获取到的是.env.development开发环境接口地址

生产环境

npm run build打包之后,在本地服务器上运行

.env 环境变量被覆盖 当前获取到的是.env.production开发环境接口地址

打开本地服务器

1. 安装http-server

npm install install -g http-server

npm有时候很慢，可换cnpm（安装）较快，或者npm配置为淘宝镜像

# 配置npm的registry地址
npm config set registry https://registry.npm.taobao.org

2. 开启http-server本地服务

#在项目根目录下运行如下命令，且前提你已经进行npm run build打包dist文件
http-server ./dist