@vue/cli3--多环境配置(模式和环境变量)--使用/实例

蔚落 2023-09-28 11:07 13阅读 0赞

原文网址：[@vue/cli3--多环境配置(模式和环境变量)--使用/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN]

### 简介 ###

**说明**

本文用实例介绍如何用vue-cli3.0配置多环境。

本文介绍的方法适用于vue-cli的这些版本：@vue/cli3.0，@vue/cli4.0。

**官网网址**

[https://cli.vuejs.org/zh/guide/mode-and-env.html][https_cli.vuejs.org_zh_guide_mode-and-env.html]

**多环境的场景**

实际项目中会有不同的环境：开发、测试、预发、生产。每一个环境可能都会有所差异，比如：服务器地址、接口地址、websocket地址等等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。要请求的后端接口地址（域名+端口）是不一样的，这时就要每个环境单独配置。

## 模式 ##

### 简介 ###

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

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

可以通过--mode参数来修改默认模式。例如，在构建命令中使用开发环境变量：

vue-cli-service build --mode development

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

### 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" 来获取可用于部署的应用程序。

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

## 环境变量 ##

### **配置文件** ###

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

*  .env
    
     *  配置所有情况下都会用到的配置
 *  .env.local
    
     *  配置所有情况下都会用到的配置，但会被 git 忽略
 *  .env.\[mode\]
    
     *  配置对应某个模式下的配置
     *  **比如：.env.development 可以配置开发环境的配置**。
 *  .env.\[mode\].local
    
     *  配置对应某个模式下的配置，但会被 git 忽略
     *  比如：.env.development 可以配置开发环境的配置。

如果不同文件存在同名的环境变量，保留高优先级文件中的值。优先级为：.env.\[mode\].local > .env.\[mode\] > .env.local > .env

### 环境变量的使用位置 ###

**简介**

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

FOO=bar
    VUE_APP_NOT_SECRET_CODE=some_value

**使用方式**

在项目的不同地方使用，限制不一样。 具体如下：

1.  在webpack配置中使用
    
    1.  没什么限制，可直接通过process.env.XXX使用
2.  在src中使用
    
    1.  必须以VUE\_APP\_开头。
        
        1.  例如：在main.js中直接输出：console.log(process.env.VUE\_APP\_KEY1)
    2.  NODE\_ENV（必须是这个名字）
        
        1.  环境："development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
    3.  BASE\_URL（必须是这个名字）
        
        1.  和 vue.config.js 中的 publicPath 选项相符。即应用会部署到的基础路径。
3.  在public/index.html中以插值方式使用
    
    1.  详见：[HTML 插值][HTML]

**解析环境文件规则的原理**

[https://github.com/motdotla/dotenv\#rules][https_github.com_motdotla_dotenv_rules]

### **注意** ###

1.  不要在应用程序中存储任何机密信息（例如私有 API 密钥）！
2.  环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。
3.  只有 NODE\_ENV，BASE\_URL 和以 VUE\_APP\_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
    
    1.  嵌入的含义：在客户端代码中可以访问到这些环境变量。比如可以这样获取变量：console.log(process.env.VUE\_APP\_KEY1)

## 实例 ##

### 1.创建项目 ###

见：[@vue/cli4--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli4--_--_IT_-CSDN]

本处创建的项目为：demo\_vue-cli4。创建完后如下图所示：

![253da8afeaf44acf8acaccbcae65c3a6.png][]

package.json

{
      "name": "demo_vue-cli4",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        // 省略
      },
      "devDependencies": {
        // 省略
      }
    }

### 2.创建环境变量文件 ###

在项目根目录创建文件，文件名为：.env，.env.develop

**.env**

空白，什么都不写

**.env.develop**

NODE_ENV='develop'
    VUE_APP_ENV_INFO='这是develop环境'

### 3.添加模式（修改package.json） ###

在"scripts"里添加一项： "develop": "vue-cli-service serve --mode develop"

添加后如下所示：

{
      "name": "demo_vue-cli4",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "develop": "vue-cli-service serve --mode develop"
      },
      "dependencies": {
        // 省略
      },
      "devDependencies": {
        // 省略
      }
    }

这样就新建了一个运行环境，模式名字为develop。 模式的名字develop就对应.env.develop的“develop”后缀。

### 4.获取配置的值（修改页面程序） ###

本处我修改：src/views/Home.vue

修改前：

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default {
      name: 'Home',
      components: {
        HelloWorld
      }
    }
    </script>

修改后：

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
        <h1>{
       { envInfo }}</h1>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      computed: {
        envInfo () {
          return process.env.VUE_APP_ENV_INFO
        }
      }
    }
    </script>

### 5.启动并测试 ###

修改后的目录结构：

![1a2b517a6b234994ac1dd5aa1dfdd875.png][]

启动项目：npm run develop

它就会执行此命令：vue-cli-service serve --mode develop

直接点击WebStrom的这项即可：

![8e7c57ce65e142029804c8b82d58ccaf.png][]

启动完毕后，访问：[http://localhost:8080/][http_localhost_8080]

结果：（获取到了环境变量值）

![13a2e3946c99439bbdfade846fd197fe.png][]

## 其他网址 ##

[【Vue】vue-cli3多环境配置 - 简书][Vue_vue-cli3_ -]

[vue_cli3--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125349643
[https_cli.vuejs.org_zh_guide_mode-and-env.html]: https://cli.vuejs.org/zh/guide/mode-and-env.html
[HTML]: https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E6%8F%92%E5%80%BC
[https_github.com_motdotla_dotenv_rules]: https://github.com/motdotla/dotenv#rules
[vue_cli4--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125397525
[253da8afeaf44acf8acaccbcae65c3a6.png]: https://img-blog.csdnimg.cn/253da8afeaf44acf8acaccbcae65c3a6.png
[1a2b517a6b234994ac1dd5aa1dfdd875.png]: https://img-blog.csdnimg.cn/1a2b517a6b234994ac1dd5aa1dfdd875.png
[8e7c57ce65e142029804c8b82d58ccaf.png]: https://img-blog.csdnimg.cn/8e7c57ce65e142029804c8b82d58ccaf.png
[http_localhost_8080]: http://localhost:8080/
[13a2e3946c99439bbdfade846fd197fe.png]: https://img-blog.csdnimg.cn/13a2e3946c99439bbdfade846fd197fe.png
[Vue_vue-cli3_ -]: https://www.jianshu.com/p/ff121b7119b9