VueCLI中环境变量和模式

概要

• • 配置.env文件
  • 根据porcess.env判断当前环境并更换axios中的base_URL

为什么要配置.env文件

1.依靠环境变量,这样就可以根据不同的环境,配置不同环境下可以请求相对应的接口地址

创建.env文件

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

1. development 用于项目的测试环境
2. production 用于正式环境
3. test  用于本地环境

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

 "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "preview": "serve dist",
    "test": "vue-cli-service build --mode test",
    "production": "vue-cli-service build --mode production",
    "development": "vue-cli-service build --mode development"
  },

vue-cli-service build 就是打包相对环境的dist文件
运行指令: npm run  development

打包之后自己也可在电脑上服务查看效果

1.找到项目中dist文件夹位置

 在搜索栏中输入cmd 

 按钮安装 http-server :

npm install -g http-server

 运行服务: http-server ./dist

http-server ./dist

这样表示运行完成啦

 

创建文件:

1.在项目跟目录文件中 创建   注意 (  .env env前面有小数点)

   (1): .env.test : 本地环境配置 

   (2): .env.development :测试环境配置

   (3):  .env.production : 正式环境配置

2.文件配置内容

 .env.production文件 

//正式环境 注意不要带有引号  不然到时候判断当前是哪个环境的时候 查询porcess.env.NODE_ENV  返回的是 => 'production' 而不是 => 'production'
NODE_ENV = production//环境名称 这个
VUE_APP_MODE = production
VUE_APP_BASE_URL = http://99.11.117.98:82  //访问的地址 这里就是后端提供的接口地址了

.env.tes文件

//正式环境 注意不要带有引号  不然到时候判断当前是哪个环境的时候 查询porcess.env.NODE_ENV  返回的是 => 'test ' 而不是 => test 
NODE_ENV = test //环境名称
VUE_APP_MODE = test 
VUE_APP_BASE_URL = http://199.11.117.98:82  //访问的地址 这里就是后端提供的接口地址了

.env.development文件

//正式环境 注意不要带有引号  不然到时候判断当前是哪个环境的时候 查询porcess.env.NODE_ENV  返回的是 => 'development' 而不是 => development
NODE_ENV = development//环境名称
VUE_APP_MODE = development
VUE_APP_BASE_URL = http://199.11.117.98:82  //访问的地址 这里就是后端提供的接口地址了

文件配置好了之后 ,然后去axios文件中的 index.js文件

console.log('process.env',process.env);

输出的就是当前运行的环境

好了得到这个结果后就可以根据当前的环境去配置请求中对应环境的地址

let baseURL = ""
switch (process.env.NODE_ENV){
  case 'test':
    baseURL = process.env.VUE_APP_BASE_URL
    break;
  case 'production' :
    baseURL = process.env.VUE_APP_BASE_URL
    break;
  case 'development' :
    baseURL = process.env.VUE_APP_BASE_URL
    break;
}

console.log('process.env',process.env);
//1.创建axios 实例
 const instance = axios.create({
  //  //1.1.设置请求头路径
    baseURL,
    //1.2设置请求过期时间
    timeout:5000,