vue中根据不同的开发环境配置不同的请求地址

4、Vue 环境变量配置

1. 在开发的时候一般会有是三个环境：开发环境 测试环境 线上环境

   vue 中有个概念就是模式，默认先 vue cli 有三个模式

   • development开发环境模式用于 vue-cli-service serve
   • production生产环境模式用于 vue-cli-service build 和 vue-cli-service test:e2e
   • test测试环境模式用于 vue-cli-service test:unit

2. 但是往往开发的时候可能不止有三种：

   • 本地环境（local）
   • 开发环境（development）
   • 测试环境（devtest）
   • 预发布环境（beta）
   • 生产环境（production）

3. 创建不同环境变量文件

   通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。

   • 在项目根路径下设置 新建对应文件 .env.development（开发环境文件） .env.production（生产环境文件）.env.devtest（测试环境文件）

   • 在每个文件写入如下内容(VUE_APP_随便写）

   VUE_APP_XIAOMING = "开发模式"
   

   • package.json 环境对应的执行语句

   "scripts": {
     "serve": "vue-cli-service serve",//开发模式
     "build": "vue-cli-service build",//生产模式
     "dev_test_build": "vue-cli-service build --mode development_test",//测试模式
     "lint": "vue-cli-service lint"
   },
   

   • 使用变量process.env.你的内容即可得到

   import { reactive, ref,onMounted} from "vue";
   onMounted(()={
       console.log(process.env.VUE_APP_XIAOMING);
   })
   

4. 因此我们就可以根据不同环境下的参数来给axios进行baseURL配置
   通过判断不同环境下来匹配不同的url

let axiosurl = ""
// 如果为开发模式的话执行url
if(process.env.NODE_ENV === 'development' ){
  axiosurl = process.env.VUE_APP_API
}else{
  // 否则设置成其他的模式（这里今后有很多个判断）
  axiosurl = process.env.VUE_APP_API
}
// 创建axios 赋值给常量service 
const service = axios.create({
  baseURL: axiosurl
});