我们在开发项目过程中,正常情况下会有本地开发环境,测试线环境,线上正式线环境等,当然不同公司会有点差别,具体情况具体玩吧,不同环境的配置会有所不同,比如我们服务器地址,接口地址等等。所以我们要区分,那就需要我们配置境变量和模式,来管理。 

关于环境变量的配置,在此,自己也是简单做一下笔记,只为方便以后查看,虽然官方有文档:部分内容也会拿过来记录,下面是自己之前配置的一些笔记整理。

一、环境变量的四种方式

在官方文档中,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文件(三)