PROCESS（进程）process 对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制。

 作为全局变量，它始终可供 Node.js 应用程序使用，无需使用 require()。

PROCESS.ENV(环境变量)process.env属性会返回包含用户环境的对象。

通俗来讲，该属性可以返回项目运行环境的信息。在 Windows 操作系统上，环境变量不区分大小写。

在Vue CLI上自定义配置process.env环境变量那我们在组件中使用的时候，也会拿到对应的环境变量。 

 我们一般用process.env.NODE_ENV来区分开发环境和线上环境。 在开始本文之前，我先强调一下， process.env.NODE_ENV默认只有两种状态即development和production，development指开发环境，

说白了就是本地开发即localhost环境（本地的开发），

而production代表发布在任何服务上的服务（不管是dat、uat还是生产环境），

node是不知道你服务是测试还是正式，除非你手动指定。通常认为都是线上环境。

所以可以这样认为development代表本地开发环境，production代表线上环境（包括dat、uat和生产环境等）
前言

官网上说：

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

development 模式用于 vue-cli-service serve

test 模式用于 vue-cli-service test:unit

production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

我是这样理解的，

development 模式 -----对应开发环境

test 模式 ------------------对应测试环境

production 模式 --------对应生产环境

如果项目中我们没有设置NODE_ENV 变量，那么我们在项目中去使用process.env.NODE_ENV这个变量时，就会跟模式对应起来（相当于Vue CLI已经帮我们做好了设置）。

development 模式 -----process.env.NODE_ENV为development

test 模式 ------------------process.env.NODE_ENV为test

production 模式 --------process.env.NODE_ENV为production

那这可以改吗？

可以

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

例如，如果你想要在构建命令中使用开发环境变量：

npm run serve 运行项目 对应的是process.env.NODE_ENV == development 开发环境

那我想npm run serve 运行项目 对应的是process.env.NODE_ENV == production 生产环境，怎么修改呢？修改如下

那这个时候

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

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

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

环境文件 配置变量

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

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

除此之外,还有两个特殊的变量

NODE_ENV - 会是 "development"、"production" 或 "test"中的一个。具体的值取决于应用运行的模式。可以自行修改

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

实战

我会在项目中新建三个文件，如图：

.env.dev文件中的内容

.env.prod文件中的内容

.env.dev文件中的内容

package.json中的script脚本命令：

这样就实现了在Vue CLI上自定义配置process.env环境变量

那我们在组件中使用的时候，也会拿到对应的环境变量。

打开本地服务器

安装http-server

npm install install -g http-server

开启http-server本地服务

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

http-server ./dist

参考：

https://blog.csdn.net/xiaolinlife/article/details/119913684

https://blog.csdn.net/xiaolinlife/article/details/107032533