原文网址：vue-cli3.0--多环境构建(模式和环境变量)--使用/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

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

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

官网网址

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. 在项目中，也就是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 选项相符。即应用会部署到的基础路径。
2. 在webpack配置中使用
   1. 没什么限制，可直接通过process.env.XXX使用
3. 在public/index.html中以插值方式使用
   1. 详见：HTML 插值

解析环境文件规则的原理

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博客

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

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.启动并测试

修改后的目录结构：

启动项目：npm run develop

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

直接点击WebStrom的这项即可：

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

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

其他网址

【Vue】vue-cli3多环境配置 - 简书