原文网址：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 项目有三个模式：
- development 模式：用于 vue-cli-service serve
- test 模式：用于 vue-cli-service test:unit
- 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使用方式
在项目的不同地方使用，限制不一样。 具体如下：
- 在项目中，也就是src中使用
- 必须以VUE_APP_开头。
- 例如：在main.js中直接输出：console.log(process.env.VUE_APP_KEY1)
- NODE_ENV
- 环境："development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
- BASE_URL
- 和 vue.config.js 中的 publicPath 选项相符。即应用会部署到的基础路径。
- 必须以VUE_APP_开头。
- 在webpack配置中使用
- 没什么限制，可直接通过process.env.XXX使用
- 在public/index.html中以插值方式使用
- 详见：HTML 插值
解析环境文件规则的原理
https://github.com/motdotla/dotenv#rules
注意
- 不要在应用程序中存储任何机密信息（例如私有 API 密钥）！
- 环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。
- 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
- 嵌入的含义：在客户端代码中可以访问到这些环境变量。比如可以这样获取变量：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/
结果：（获取到了环境变量值）
