vue-07 接口环境设置

目录

1.概述

1.1.JSONP跨域或者CORS跨域配置接口环境,代理跨域的话就不需要这么麻烦

1.1.1根目录添加env.js

1.1.2修改package.json

1.1.3main.js

1.1.4启动测试

 

---

1.概述

开发线上的不同阶段，需要不同的配置，不同的跨域方式配置不同，打包的时候统一注入环境变量，输出不同版本包； 

1.1.JSONP跨域或者CORS跨域配置接口环境,代理跨域的话就不需要这么麻烦

代理 https://blog.csdn.net/adminBfl/article/details/109564817 2.3章节

1.1.1根目录添加env.js

env.js

let baseUrl;
//node.js api process.evn.NODE_ENV获取进程穿的参数
switch (process.env.NODE_ENV) {
    case "development":
        baseUrl = "http://dev-mall-pre.springboot.cn/api";
        break;
    case "test":
        baseUrl = "http://test-mall-pre.springboot.cn/api";
        break;
    case "production":
        baseUrl = "http://mall-pre.springboot.cn/api";
        break;
    default:
        baseUrl = "http://mall-pre.springboot.cn/api";
        break;
}

1.1.2修改package.json

--mode=development", //开发
--mode=test",    //测试
--mode=production",    //生产 

名字是固定的不能随意改，可以自定义

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

 

 

1.1.3main.js

import Vue from 'vue'
import router from "./router";
import axios from "axios";
import VueAxios from "vue-axios";
import App from './App.vue'
import env from './env'
//设置axios 基础值
//根据前端跨域做调整，使用代理可以把api给替换为空
axios.defaults.baseURL ='/api';
axios.defaults.baseURL =env.baseURI;

1.1.4启动测试

选择一个测试，我选择test测试一下

可以看到启动的时候==mode=test显示出来了

访问项目在main.js debug可以看到里面已经是测试环境了

env.js