vue - 环境变量和模式

1.在项目根目录中创建.env 或者 .env.xxx 的文件来指定环境变量

.env                # 在所有的环境中被载入

.env.local          # 在所有的环境中被载入，但会被 git 忽略

.env.[mode]         # 只在指定的模式中被载入

.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
.env.dev            # 指定开发模式dev
.env.prod           # 指定生产模式prod
.env.test           # 指定测试模式test

注：以.local结束的文件会被忽略，是因为忽略文件.gitignore文件设置了

.env.local

.env.*.local

2.环境文件的优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

不会被 .env 文件覆写。

3.一个环境文件只包含环境变量的“键=值”对

例如：.env.test文件的配置可如下

# 环境

NODE_ENV = 'test'

# 接口地址

VUE_APP_BASE_API = '/api'

# 打包文件名

VUE_APP_DIR_NAME = 'test'

4.模式

（1）模式与环境变量是和关系？

　　模式！= 环境变量

　　一个模式可以包含多个环境变量

（2）模式如何添加呢？

　　.env 文件增加后缀来设置某个模式

如.env.test文件的后缀名是test,即为test模式。 test模式下含有NODE_ENV ，VUE_APP_BASE_API ，VUE_APP_DIR_NAME 这3个环境变量，如有需要，可自行添加其他环境变量

5.使用

（1）构建命令中使用开发环境变量

　　通过传递 --mode 选项参数为命令行覆写默认的模式。

 "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build --mode build",

    "dev": "vue-cli-service serve --mode dev",

    "test": "vue-cli-service build --mode test"

  },

注：--mode 后面跟的名字一定要跟 .env.xxx 的名字对应起来才能实现不同的命令用不同的配置文件

（2）客户端代码中使用

const instance = axios.create();

// instance.defaults.baseURL = baseurl;

instance.defaults.baseURL = process.env.VUE_APP_BASE_API;

instance.defaults.timeout = 2000;

//设置打包后的目录名

outputDir:process.env.VUE_APP_DIR_NAME,

巴特西

vue - 环境变量和模式

最新文章

热门文章