Vue 设置全局变量（引入自定义JS）

﹏ヽ暗。殇╰゛Y 2023-09-29 04:26 20阅读 0赞

### Vue 全局引入自定义JS ###

*  一、需要引入的JS（例子）
 *  二、Vue 2.0 全局引用
 *  三、Vue 3.0 全局引用
 *  四、调用方式

**前言：**

> 在使用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

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue定义全局变量

1、将从服务器请求的数据作为全局变量（全局变量模块挂载到Vue.prototype）在开发中，有时需要将从接口请求到的一些数据当做全局变量，在其他页面多次使用。比如...

墨蓝/ 2024年04月19日 10:58/ 0 赞/ 85 阅读

相关 Vue 设置全局变量（引入自定义JS）

Vue 全局引入自定义JS 一、需要引入的JS（例子）二、Vue 2.0 全局引用三、Vue 3.0 全局引用四、调用方式前言： >

﹏ヽ暗。殇╰゛Y/ 2023年09月29日 04:26/ 0 赞/ 21 阅读

相关 vue-cli 3 全局引入scss变量

1、安装sass-resources-loader npm install sass-resources-loader -S 2、在根路径下（package.jso

系统管理员/ 2023年02月14日 06:47/ 0 赞/ 20 阅读

相关 vue设置全局变量

前端调用后端接口的时候，我们固定的前端地址建立全局变量文件global.vue: <script> // 固定的地址 const fortUrl

爱被打了一巴掌/ 2023年02月12日 10:23/ 0 赞/ 33 阅读

相关 vue引入全局静态变量_Vue-cli3配置全局环境变量

![88b0ea57f0f3ce2eb079ccfdf5251e5f.png][] 1.根目录下创建.env文件，里面可以用key=value的形式设置全局变量 ![087

- 日理万妓/ 2022年10月26日 14:10/ 0 赞/ 518 阅读

相关 vue全局自定义指令

一、用一个页面放自定义方法 clickStateForm.js / @description 自定义指令v-preventClick 防止重复点击

绝地灬酷狼/ 2022年09月08日 04:55/ 0 赞/ 285 阅读

相关 JS自定义全局Error

<script> ///自定义错误 onerror=handleErr; function handleErr(msg,url

你的名字/ 2022年01月22日 07:35/ 0 赞/ 328 阅读

相关 Vue-Cli 3 引入 SCSS 全局变量

首先创建一个全局变量文件 `global.scss` $theme-color: efefef; 复制代码编辑`vue.config.js`

以你之姓@/ 2022年01月19日 00:21/ 0 赞/ 707 阅读

相关 Vue全局引入JS的方法

两种情况： 1. js为ES5的写法时，如下（自定义的my.js）: <table> <tbody> <tr> <td> <p>1</p> <p>2</p

左手的ㄟ右手/ 2021年12月11日 21:19/ 0 赞/ 555 阅读

相关 vue引入全局过滤器，引入全局公共方法，引入全局变量

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

川长思鸟来/ 2021年11月16日 17:38/ 0 赞/ 699 阅读