[JavaScript知识库]Vue 设置全局变量（引入自定义JS）

前言：

在使用Vue的时候我们常常会封装一些JS工具来使用，比如前后端交互常用的Axios，然后在里面配置一些参数，如果一个个页面引入会很麻烦。所以这时候就需要进行一个全局引入，以下以axios为例子进行介绍。

一、需要引入的JS（例子）

在utils下的request.js文件

//Axios的封装
import axios from 'axios'

const request = axios.create({
    baseURL: '//localhost:8080', 
    timeout: 5000,
    headers:{
        "Content-Type": "application/json;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
    }
});

//导出
export default request

二、Vue 2.0 全局引用

在main.js中：

//引入js文件
import request from "./utils/request";
Vue.prototype.$request = request;

三、Vue 3.0 全局引用

在main.js中：

import request from "./utils/request";
//配置全局变量
app.config.globalProperties.$request = request;

四、调用方式

两个版本的调用方式一样

this.$request.post('/user',this.form).then(res =>{
	console.log(res);
});

参考：

https://blog.csdn.net/weixin_53200369/article/details/123814920

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖