vue-Cli3.0使用全局变量进行接口及域名管理

最新推荐文章于 2024-06-19 13:23:33 发布

Cage0315

最新推荐文章于 2024-06-19 13:23:33 发布

阅读量941

点赞数 1

分类专栏： vue 文章标签： axios 域名封装模块化

本文链接：https://blog.csdn.net/cage7181/article/details/101675269

版权

本文介绍了如何在VueCli3.0中使用全局变量进行接口和域名的管理，包括创建.env文件设置VUE_APP_BASE_URL，配置vue.config.js中的proxy引用，axios的baseURL设定以及接口的模块化组织，实现不同环境下的URL切换和便于维护的接口管理。

摘要由CSDN通过智能技术生成

思路很简单：

第一步：创建.env文件，本地环境，测试环境，线上环境，系统默认为三个，根据需求可进行添加。

注意点：在env文件里命名必须以 VUE_APP_开头，比如说url：VUE_APP_BASE_URL = "路径"。

第二步：创建vue.config文件（vue-cli3.0默认没有此文件，需自行创建，配置方式和2.0一样）,然后在proxy里进行变量引用。

第三步：创建axios文件，主要是指定baseURL,事实上这步也是最重要的一步，指定了baseURL,在不同环境下都是不同的URL。

import axios from "axios";
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASEAPI
});
export default instance;

第四步：模块化接口,每个功能模块的接口在一个文件里，方便管理。也利于多人开发。

import axios from "../http"; //http中创建的axios实例
import qs from "qs"; //qs模块
const https = {
  //

关注

专栏目录