vue-07 接口环境设置

最新推荐文章于 2022-10-18 11:55:47 发布

原创最新推荐文章于 2022-10-18 11:55:47 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种通过环境变量实现不同部署阶段跨域解决方案的方法。详细步骤包括：在项目根目录下创建env.js文件来根据不同环境设置API基础路径，修改package.json以支持不同环境的构建，以及在main.js中引入env配置并应用于axios请求。此方案适用于Vue项目的JSONP或CORS跨域场景。

1.概述

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

1.概述

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

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

代理 https://blog.youkuaiyun.com/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;