VueCLI 通过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选项相符，即你的应用会部署到的基础路径。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体获取

取！！（备注：前端）**

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体获取

[外链图片转存中…(img-L6PAeP6k-1712534766844)]

[外链图片转存中…(img-N2JCJClY-1712534766845)]

[外链图片转存中…(img-ykzDbYo2-1712534766845)]

[外链图片转存中…(img-zaSSWCoI-1712534766845)]