关于vue3.0使用axios报错问题

vue-cli3.0使用axios的时候出现错误，记录一下

报错信息：

Uncaught TypeError: Cannot set property $axios of #<Vue> which has only a getter
at eval (main.js?56d7:12)
at Module../src/main.js (app.js:11102)
at __webpack_require__ (app.js:724)
at fn (app.js:101)
at Object.0 (app.js:11283)
at __webpack_require__ (app.js:724)
at app.js:791
at app.js:794

vue-cli3.0安装插件的时候要注意区分vue-cli2.0的命令

安装：

//vue-cli2.0命令
$ npm install axios
//vue-cli3.0命令
$ npm add axios

使用：

1.首先在main.js里边把axios实例挂载到Vue原型上
  坑点: 命名的时候不能使用"axios"这个字段
import axios from 'axios'
Vue.prototype.$ajax = axios
2.在需要发送请求的地方使用"$ajax"
this.axioss.get('/api/seller')
        .then(function(res){
            console.log(res);
            this.seller = res.data;
        })
        .catch(function(error){
            console.log(error);
        })

到此这篇关于vue3.0使用axios报错问题记录的文章就介绍到这了,更多相关vue3.0使用axios报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3在Setup中使用axios请求获取的值方式

    目录 Setup中使用axios请求获取的值 Vue3+Setup使用知识点 Setup中使用axios请求获取的值 上次我们使用axios给项目搞上了网络请求,从此项目数据不再是静态的.对于后端返回的值如何赋值给data里面的变量并且赋予数据响应式,写此日记记录踩坑过程. axios返回的项目数据无法通过函数返回值返回,如何获取返回值呢? <script> import { defineComponent, reactive, onMounted, toRefs, ref } from &q

  • vue3如何实现挂载并使用axios

    vue3如何实现挂载并使用axios

    目录 vue3挂载并使用axios vue全局挂载axios vue3挂载并使用axios 首先在main.js中引入axios并挂载到app.config.globalProperties上 axios配置文件放置./assets/js/axios main.js import { createApp } from 'vue' import App from './App.vue' import './index.css' import axios from './assets/js/axio

  • Vue3全局挂载使用Axios学习实战

    Vue3全局挂载使用Axios学习实战

    目录 引言 一.全局挂载 二.全局使用 引言 在vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口.但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的globalPropertiesAPI. 一.全局挂载 在vue2项目中,入口文件main.js配置Vue.prototype挂载全局方法对象: import Vue from 'vue' import router from '@/router' impo

  • vue3 学习笔记之axios的使用变化总结

    vue3 学习笔记之axios的使用变化总结

    目录 一.axio 得基本使用 二.如何解决跨域问题? 三.封装 四.全局引用 axios 使用 axios 之前,需要先安装好. yarn add axios npm install axios bower install axios <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 上边的四种安装方式,根据你创建的项目,自行选择方式. 一.axio 得基本使用 先创建一个组件,

  • 关于Vue3使用axios的配置教程详解

    目录 一.安装axios 二.配置axios,添加拦截器 三.使用axios发送请求 附:Vue3 中全局引入 axios 总结 axios中文网站:axios-http.com/zh/ 一.安装axios npm install axios --save 二.配置axios,添加拦截器 在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下: import axios from 'axios' // 创建一个 axios 实例 const ser

  • Vue3中使用typescript封装axios的实例详解

    这个axios封装,因为是用在vue3的demo里面的,为了方便,在vue3的配置里面按需加载element-plus 封装axios http.ts import axios, { AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse } from 'axios' import { IResponseData } from '@/types' import { ElMessage, ElLoading, ILoadingInstance

  • 关于vue3.0使用axios报错问题

    vue-cli3.0使用axios的时候出现错误,记录一下 报错信息: Uncaught TypeError: Cannot set property $axios of #<Vue> which has only a getterat eval (main.js?56d7:12)at Module../src/main.js (app.js:11102)at __webpack_require__ (app.js:724)at fn (app.js:101)at Object.0 (app.

  • 解决Android studio 2.3升级到Android studio 3.0 后apt报错问题

    1.现象描述 原来项目在Android studio 2.3一切正常,升级3.0之后报如下错误: Error:Cannot choose between the following configurations of project :android_sdk: - debugApiElements - debugRuntimeElements - releaseApiElements - releaseRuntimeElements All of them match the consumer

  • 解决安装mysqlclient的时候出现Microsoft Visual C++ 14.0 is required报错

    在安装mysqlclient的时候出现了以下报错: 解决办法: 1.到提示网址:https://visualstudio.microsoft.com/download/里面下载对应VC++版本安装后继续安装mysqlclient.但是本人没有找到对应文件,故不再过多赘述,这里说下第二种方法. 2.1到https://www.lfd.uci.edu/~gohlke/pythonlibs/找到mysqlclient编译包下载对应版本: 注:前面代表python版本,后面的win代表Python位数.

  • mybatis-plus3.4.0逻辑删除报错的解决

    特别注意!!! 无论数据库字段,实体类字段,还是平时取其它字段名字时候,或者方法这些名字,一定不能和关键字重名,因为这样可能出现一些让人无法看出的错误 在进行mybatis-plus逻辑删除字段时候,我在数据库定义了delete字段定义为int类型,默认值是0,然后又在实体类中定义了这个字段delete并且在实体类的这个字段上面添加了注解@TableLogic,并且在application.properties中开启.(我使用的是3.4.0) 根据官方文档,在3.4.0版本中只需要以上两个步骤即

  • vue-cli 3.0 引入mint-ui报错问题及解决

    目录 vue-cli 3.0 引入mint-ui报错 场景 解决 mintUi在vue-cli3部分使用的问题 以下是mint-ui文档上需要增加的配置 命令 vue-cli 3.0 引入mint-ui报错 场景 官网:http://mint-ui.github.io/docs/#/zh-cn2/quickstart npm i mint-ui -S main.ts 文件中引入并使用 import MintUI from 'mint-ui' import 'mint-ui/lib/style.c

  • 详解Androidstudio3.0 关于Gradle报错的问题(小结)

    前言 升级Android Studio to 3.0 canary 1版本后,之前一个正常的Project,一直报错,报错内容如下 Error:Failed to complete Gradle execution. Cause: The version of Gradle you are using (3.3) does not support the forTasks() method on BuildActionExecuter. Support for this is available

  • 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序报错的解决办法

    未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序报错的解决办法

    错误描述: 在开发.net项目中,通过microsoft.ACE.oledb读取excel文件信息时,报错: "未在本地计算机上注册"microsoft.ACE.oledb.12.0"提供程序" 代码示例: static void Main(string[] args) { readexcel("D:\\test\\xlsxtest.xlsx"); } public static void readexcel(string _path) { Da

  • android4.0混淆XmlPullParser报错原因分析解决

    复制代码 代码如下: [2013-05-20 17:30:52 - danielinbiti] Proguard returned with error code 1. See console [2013-05-20 17:30:52 - danielinbiti] Note: there were 67 duplicate class definitions. [2013-05-20 17:30:52 - danielinbiti] Warning: library class android

  • androidstudio3.0使用butterknife报错解决的解决方法

    问题 在添加butterKnife依赖的时候出现如下错误: Annotation processors must be explicitly declared now.  The following dependencies on the compile classpath are found to contain annotation processor.  Please add them to the annotationProcessor configuration. - butterkn

  • Vue3+Element-plus项目自动导入报错的解决方案

    Vue3+Element-plus项目自动导入报错的解决方案

    目录 前言 安装步骤 1.安装插件 2.vue.config.js 设置 3.npm run serve 出错 解决方案 1.问题原因 1.1 unimport 包报错 1.2 node.js 和 npm 版本过低 2.解决方法 2.1 降低 unplugin-auto-import 插件版本 2.2 升级 node.js 和 npm 版本 补充:element-plus自动按需导入及出错解决 总结 前言 在创建 Vue3 + Element-plus 项目时,根据 Element-plus 文

随机推荐