vue-cli模式和环境变量

一时失言乱红尘 2023-01-23 09:51 5阅读 0赞

#### 一、模式 ####

模式是 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

##### 1、–mode #####

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE\_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 “production”，在 test 模式下被设置为 “test”，默认则是 “development”。

##### 2、NODE\_ENV #####

> 如果在环境中有默认的 NODE\_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE\_ENV。

NODE\_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

例如通过将 NODE\_ENV 设置为 “test”，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。

同理，NODE\_ENV=development 创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。

当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE\_ENV 设置为 “production” 来获取可用于部署的应用程序。

#### 二、环境变量 ####

你可以在你的项目根目录中放置下列文件来指定环境变量：

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

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

FOO=bar
    VUE_APP_NOT_SECRET_CODE=some_value

##### Staging 模式 #####

假设我们有一个应用包含以下 .env 文件：

VUE_APP_TITLE=My App

和 .env.staging 文件：

NODE_ENV=production
    VUE_APP_TITLE=My App (staging)

*  vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件然后构建出生产环境应用。
 *  vue-cli-service build --mode staging 会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件然后构建出生产环境应用。

这两种情况下，根据 NODE\_ENV，构建出的应用都是生产环境应用，但是在 staging 版本中，process.env.VUE\_APP\_TITLE 被覆写成了另一个值（My App (staging)）

#### 三、实例 ####

##### 3、实例 #####

（1）项目底下创建4个配置文件  
![在这里插入图片描述][20210714112241346.png]

.env.pro内容如下：

NODE_ENV=production
    VUE_APP_BASE_URL = http://localhost/pro

.env.development内容如下：

NODE_ENV=development
    VUE_APP_BASE_URL = http://localhost/dev

其他配置文件类型 ，只改变后缀mock,test  
（2）运行测试  
测试代码

<template>
      <div >
          baseUrl:{ { baseurl}}
      </div>
    </template>
    
    <script>
     export default { 
      components: { },
      data: function() { 
        return { 
            baseurl: process.env.VUE_APP_BASE_URL
        };
      },
      created() { },
      mounted() { },
      methods: { 
      }
    };
    </script>

package.json配置文件如下：

"scripts": { 
        "serve": "vue-cli-service serve",
        "test": "vue-cli-service serve --mode test",
        "build": "vue-cli-service build --mode pro",
        "mock": "vue-cli-service build --mode mock",
        "lint": "vue-cli-service lint"
      },

*  执行 npm run serve ，则默认读取.env.development文件内容  
    结果：baseUrl:http://localhost/dev
 *  执行 npm run test ，则读取.env.test文件内容  
    结果：baseUrl:http://localhost/test
 *  执行 npm run build ，则读取.env.pro文件内容  
    结果：baseUrl:http://localhost/pro
 *  执行 npm run mock ，则读取.env.mock文件内容  
    结果：baseUrl:http://localhost/mock

[20210714112241346.png]: /images/20221004/d8e8356e3cc84dccb18eabcf6dadb227.png