我们在开发项目过程中，正常情况下会有本地开发环境，测试线环境，线上正式线环境等，当然不同公司会有点差别，具体情况具体玩吧，不同环境的配置会有所不同，比如我们服务器地址，接口地址等等。所以我们要区分，那就需要我们配置境变量和模式，来管理。
关于环境变量的配置，在此，自己也是简单做一下笔记，只为方便以后查看，虽然官方有文档：部分内容也会拿过来记录，下面是自己之前配置的一些笔记整理。
一、环境变量的四种方式
在官方文档中，CLI3.0有四种方式来指定环境变量：
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略官方文档：https://cli.vuejs.org/zh/guide/mode-and-env.html
看官方上的说明，意思就是：不同的文件会在不同环境中被载入，比如我们这样写：
.env # 会在所有的环境中被载入 .env.local # 会在所有环境中载入，但只限于本地，不会被git跟踪，git会忽略掉它 .env.development # 只在开发环境中被载入 .env.production # 只在生产环境中被载入 .env.development.local # 会在本地开发环境中载入，不会被git跟踪，git会忽略掉它这些环境变量都是在项目根目录下建立的，如果写有变量，那么我们运行相关命令的时候，会根据不同环境载入不同的文件，以至于能正确读到文件里的变量。载入的优先级别是：
.env.[mode].local > .env.[mode] > .env因为：为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
二、模式
默认情况下，一个 Vue CLI 项目有三个模式:
development #模式用于 vue-cli-service serve production #模式用于 vue-cli-service build 和 vue-cli-service test:e2e test #模式用于 vue-cli-service test:unit我们可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量，意思就是：在某些文件只会在某个模式下被载入，比如：
.env.development 的文件就只会在 development 模式下被载入。
当然，我们是可以通过参数来修改默认模式的。通过–mode 后面跟上指定模式名来修改，–mode development。比如我们想在build构建的时候，使用开发环境的变量。
"build": "vue-cli-service build --mode development",或者我们可以新加入一个：
"dev-build": "vue-cli-service build --mode development",当然，关于模式，我们可以自己新建一个，比如我们新建一个叫的staging模式，是用于构建生产环境的，但一些变量不同。首先，我们需在项目根目录新建.env和.env.staging文件，对应的声明变量如下：
// env VUE_APP_URL='http://www.qianduan8.com'
// env.staging NODE_ENV=production VUE_APP_URL='http://staging.qianduan8.com' VUE_APP_outputDir = 'staging'那么我们可以在package.json加入staging模式：
"scripts": {
"serve": "vue-cli-service serve", //不带mode参数时，默认已是开发环境，等同vue-cli-service serve --mode development
"build": "vue-cli-service build", //不带mode参数时，默认已是生产环境 等同vue-cli-service build --mode production
"lint": "vue-cli-service lint",
//会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件，然后构建出生产环境应用。
"staging" :"vue-cli-service build --mode staging"
}
当我们运行 npm run staging 时，构建出来的应用VUE_APP_URL就是 http://staging.qianduan8.com了。会覆盖掉其他的值了。
在最后，会记录有运行应用的测试。
三、环境变量和在代码中使用环境变量
关于环境变量，我们需要注意的是：变量必须以VUE_APP_开头，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
比如我们上面建的VUE_APP_URL和VUE_APP_outputDir变量，我们在代码中就可以这样使用它了：
process.env.VUE_APP_outputDir process.env.VUE_APP_URL当然，除了 VUE_APP_*的自定义变量之外，还有两个特殊的变量，我们始终都可以使用：
NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。 BASE_URL - 会和 vue.config.js 中的 baseUrl 选项相符，即你的应用会部署到的基础路径。下面我们来简单使用一下：
首先，我们在根目录下新建.env、.env.development、.env.development.local 和.env.production，它们的代码分别为：
// env VUE_APP_URL=http://www.qianduan8.com // env.production NODE_ENV=production VUE_APP_URL=http://www.qianduan8.com // env.development NODE_ENV=development VUE_APP_URL=http://dev.qianduan8.com // env.development.local NODE_ENV=development.local VUE_APP_URL=http://local.qianduan8.com我要在js里使用的话，如下使用就可以了。比如我们的vue.config.js
module.exports = {
publicPath: process.env.VUE_APP_URL,
//这里在webpack配置时判断不同环境下使用不同配置
configureWebpack: config => {
if (process.env.NODE_ENV === "development") {
config.devtool = "source-map";
} else if (process.env.NODE_ENV === "production") {
config.devtool = "eval-source-map";
}
},
outputDir:process.env.VUE_APP_outputDir
}
在页面使用时，比如About.vue页面，
<template>
<div class="about">
<h1>This is an about page</h1>
<h2>服务器地址:{{url}}</h2>
<h3>当前环境：{{env}}</h3>
</div>
</template>
<script>
export default {
data(){
return {
url:process.env.VUE_APP_URL,
env:process.env.NODE_ENV
}
}
}
</script>
四、运行测试效果
1、npm run serve
当我们运行这个命令是，默认的是develpoment模式，会加载我们建的.env,.env.development,.env.development.local文件，根据环境加载优先级，也就是
.env.development.local > .env.development > .env的优先级。
最后会显示.env.development.local的内容：如图：
2、npm run build
我们把package.json文件修改一下，build使用的的development模式
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode development",
"lint": "vue-cli-service lint",
"staging": "vue-cli-service build --mode staging"
}
build上我们写得是development模式，这样build的时候，会加载存在的.env,.env.development,.env.development.local文件。
最后看一下我们dist里成功打包好的index.html ，路径都是http://local.qianduan8.com了，如图
因为我们的vue.config.js的配置publicPath是publicPath: process.env.VUE_APP_URL，而env.development.local配置是VUE_APP_URL=http://local.qianduan8.com。
我们改为
"build": "vue-cli-service build",在运行npm run build ，看看index.html的路径变成http://www.qianduan8.com了。因为env.production的VUE_APP_URL=http://www.qianduan8.com
3、npm run staging
为了方便区分，在vue.config.js配置中，我们先把build输出目录outputDir修改一下outputDir:process.env.VUE_APP_outputDir，而.env.staging我们之前已经建好了。
如图已经成功打包生成好staging文件夹了。那么现在使用的就是我们.env.staging环境变量，因为会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件，然后构建出生产环境应用。
vue-cli3.0入门-配置vue.config.js文件（三）
