vuecli3 环境变量配置

原文连接：www.edik.cn/article/323

配置环境变量

1. 在根目录添加.env文件，通用配置。
2. 在根目录添加.env.local 文件，通用配置，与.env的区别是只会在本地，该文件不会被git提交。
3. 在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,好比：.env.development来配置开发环境的配置。
4. 在根目录添加.env.[mode].local文件，配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效，该文件不会被git提交。 在文件中，使用key=value的方式设置变量
   如：

BAE_URL='https://www.edik.cn'
VUE_APP_SECRET='secret'
复制代码

环境变量的使用

1. 在项目中使用

即在src目录下使用，变量名必须以 VUE_APP_ 开头
在main.js中直接输出一下命令 查看效果

前提：配置好对应的变量

console.log(process.env.BAE_URL)
console.log(process.env.VUE_APP_SECRET)
复制代码

2.在webpack配置中使用

这个没有限制，能够直接经过process.env.XXX来使用

3.在index.html模板中使用

我暂时没用到过使用场景，请本身摸索

<%= VAR %> 用于非转换插值  例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
<%- VAR %> 用于HTML转义插值
<% expression %> 用于JavaScript控制流    
复制代码

默认的三种模式

模式	对应npm命令	对应文件名称
development	server	.env.development
production	build	.env.production
test	test	.env.test

注意： process.env.NODE_ENV为默认变量，会自动设置为上边对应的模式名称（test的我没试过，请自行校验）

自定义模式

现实老是残酷的，默认的三种模式也许并不能知足咱们的全部使用场景，使用自定义模式能够很好地解决这个问题。
咱们开始建立一个 alpha 模式

修改package.json

添加一行命令"alpha": "vue-cli-service build --mode alpha"
实际效果

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve", //本地开发运行，会把process.env.NODE_ENV设置为'development'
    "build": "vue-cli-service build", //默认打包模式，会把process.env.NODE_ENV设置为'production'
    "alpha": "vue-cli-service build --mode alpha", //自定义打包模式，会把process.env.NODE_ENV设置为文件内定义的名称
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
  }
}
复制代码

添加.env.alpha文件

在项目根路径建立.env.alpha文件，内容为

NODE_ENV = 'alpha'
复制代码

测试

建立下边js文件，在页面中引用

let baseUrl: string = "";   //这里是一个默认的url，能够没有
switch (process.env.NODE_ENV) {
    case 'development':
        baseUrl = "http://localhost:8888/"  //这里是本地的请求url
        break
    case 'alpha':   // 注意这里的名字要和设置的模式名字对应起来
        baseUrl = "http://alpha.edik.cn/"  //这里是测试环境中的url
        break
    case 'production':
        baseUrl = "https://www.edik.cn/"   //生产环境url
        break
}
export default baseUrl;
复制代码