node环境变量配置_vuecli3 配置多环境打包

vue-cli3 配置多环境打包

近期由于公司项目需要在本地服务器和阿里云服务器两个地方搭建项目，因为本地服务器是内网无法访问在阿里云的微服务接口所以需要用到多环境配置，所以就研究了一下vue-cli3的多环境配置。

环境变量丨模式

首先我们先看看 vue-cli环境变量和模式，通过官网我们可以发现 vue-cli 提供了三个模式(test、development、production)而每种NODE_ENV下面可以配置多个环境变量。

我们可以通过.env文件增加后缀来设置某个模式下特有的环境变量

我们可以通过传递 --mode选项参数为命令覆写默认的模式，使用自己的环境变量

了解基本情况之后我们就举例子实现多环境。

环境加载属性

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

模式

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

development 模式用于 vue-cli-service serve

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

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

注意模式不同于 NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称——比如development 模式下 NODE_ENV 的值会被设置为 "development"。

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

1.首先在项目目录下创建不同的.env文件

目前我们讨论 开发环境 dev,测试环境test,发布环境 prod，所以我们创建如下三个文件(.env.prod、.env.test、.env.development)

2、配置三个文件

①开发环境: 如下图

这里开发环境 的 NODE_ENV 需要配置为 development

VUE_APP_API_URL 设置对应的请求地址

②测试环境 如下图

这里开发环境 的 NODE_ENV 需要配置为 production

VUE_APP_API_URL 设置对应的请求地址

③ 发布环境 如下图

这里发布环境的 NODE_ENV需要配置为production

VUE_APP_API_URL 设置对应的请求地址

 ④ 如果需要其他环境 按照以上描述 创建 .env.[model]文件

如果是 项目打包 那么 NODE_ENV 设置为 production ,本地运行(不需要打包) NODE_ENV 设置为 development

VUE_APP_API_URL 设置对应的请求地址

特别提示 上述的 VUE_APP_API_URL 不一定非要使用这个变量 只要是 VUE_APP_ 开头的都可以因为 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。都可以使用  process.env.VUE_APP_** 获取相应的值

3、完成以上所需环境配置之后改写 package.json

首先我们先看看 vue-cli环境变量和模式，通过官网我们可以发现 vue-cli 提供了三个模式(test、development、production)而每种NODE_ENV下面可以配置多个环境变量。

我们可以通过.env文件增加后缀来设置某个模式下特有的环境变量

我们可以通过传递 --mode选项参数为命令覆写默认的模式，使用自己的环境变量

了解基本情况之后我们就举例子实现多环境。

 这里 需要注意的 是 --model 后面的参数 需要是 .env.[model] 文件 对应的 [model] 

例如 .env.test 文件 那么  这里就是 --mode test.env.prod 文件 那么 这里就是 --mode prod.

特别提示 本地开发环境 如果 本地开发环境  配置 的 .env.[model] 文件名中的 model 为 development 那么 直接使用上述的  vue-cli-service serve --port 8090 --open命令，但是 如果 .env.[model]的文件名中的model 不是 development 那么 就需要在 命令后面添加 --model 这个model的值 对应的就是 .env.[model]文件的 后缀[model]的值

完成以上配置 就可以按需要执行打包命令，完成vue-cli3的 多环境打包配置。