Vue axios设置访问基础路径方法

看过axios的官方文档后配置变得简单：

在main.js 做如下配置：

import axios from 'axios'
axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web'
Vue.prototype.axios = axios

最后一行是将axios配置到Vue原型中，使用方法为：

this.axios.get('/test/1').then(function (response) {}）

可能会遇到下面的报错：

isURLSameOrigin.js?cf95:57 Uncaught (in promise) TypeError: Cannot

read property 'protocol' of undefined

这是因为axios不是VUE插件，不能使用 Vue.use(axios) 方式引用，需要使用上述原型方式引入

以上这篇Vue axios设置访问基础路径方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli 引入、配置axios的方法

    一.npm 安装axios,文件根目录下安装,指令如下 npm install axios --save-dev  二.修改原型链,在main.js中引入axios import axios from 'axios'  接着将axios改写为Vue的原型属性, Vue.prototype.$http=axios  这样之后就可在每个组件的methods中调用$http命令完成数据请求 三.在组件中使用 methods: { get(){ this.$http({ method:'get', ur

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • Vue axios设置访问基础路径方法

    看过axios的官方文档后配置变得简单: 在main.js 做如下配置: import axios from 'axios' axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web' Vue.prototype.axios = axios 最后一行是将axios配置到Vue原型中,使用方法为: this.axios.get('/test/1').then(function (response) {}) 可能会遇到下面的报错:

  • vue:axios请求本地json路径错误问题及解决

    vue:axios请求本地json路径错误问题及解决

    目录 axios请求本地json路径错误 axios的基础路径如何设置 举个栗子吧↓ 步骤一:入口文件:main.js 步骤二:组件:newList.vue axios请求本地json路径错误 本例用的是vuecli4,json等静态资源存放在public文件夹中 返回404 this.axios.get('public/redeme.json').then((res) => { console.log(res.data) }) 其实vue从代码到界面展示还要经过编译,所以路径会有所改变 实际路

  • 修改vue+webpack run build的路径方法

    vue项目用webpack打包想要修改静态资源路径等,找到项目根目录下的config文件夹,打开该文件夹下的index.js文件,默认如下: // see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname

  • vue动态设置页面title的方法实例

    本文主要介绍了Vue动态修改title的方法,需要的朋友可以参考学习,方法如下: 1.通过自定义指令去修改(单个修改比较好) //1.在main.js 页面里添加自定义指令 Vue.directive('title', {//单个修改标题 inserted: function (el, binding) { document.title = el.dataset.title } }) //2.在需要修改的页面里添加v-title 指令 <div v-title data-title="我是

  • vue 动态设置浏览器标题的方法详解

    vue 动态设置浏览器标题的方法详解

    目录 废话 正文 第一种 router/index.js 第二种 1.安装插件 2.main.js 引用 3.添加指令 笔记 总结 废话 平时设置浏览器标题是这样的 但vue是单页面应用,入口文件也只有一个html,只能设置一个标签,所以下面介绍两种常用的动态设置浏览器标签的方法 正文 第一种 使用浏览器原生方法 document.title router/index.js router.beforeEach里 //多语言项目,根根据自己项目来 import i18n from '@/i18n/

  • 基于vue项目设置resolves.alias: '@'路径并适配webstorm

    基于vue项目设置resolves.alias: '@'路径并适配webstorm

    在webpack的配置项中添加下面代码 function resolve (dir) { return path.join(__dirname, dir) } webpackConfig = { resolve: { alias: { '@': resolve('src') } } } 然后再设置一下下,在你的IDE中按住CTRL就能根据路径跳转到对应文件了 描述: ctrl+alt+s 搜索 webpack 然后选择\node_modules\@vue\cli-service\webpack.

  • asp.net访问网络路径方法(模拟用户登录)

    核心代码: public class IdentityScope : IDisposable { // obtains user token [DllImport("advapi32.dll", SetLastError = true)] static extern bool LogonUser(string pszUsername, string pszDomain, string pszPassword,int dwLogonType, int dwLogonProvider, r

  • vue项目中使用axios遇到的相对路径和绝对路径问题

    目录 使用axios遇到的相对路径和绝对路径问题 1.设置全局baseURL 2.覆盖baseURL axios设置访问基础路径 在main.js 做如下配置 可能会遇到下面的报错 使用axios遇到的相对路径和绝对路径问题 部分依赖说明: "vue": "^2.5.2", "webpack": "^3.6.0", "axios": "^0.19.0", ​通过设置全局baseURL,在

  • vue3.0 vue.config.js 配置基础的路径问题

    目录 vue3.0 vue.config.js 配置基础路径 vue3.0+ 3.x config配置 vue3.0 vue.config.js 配置基础路径 在和src同级的路径下创建一个文件名,vue.config.js(这文件名是固定这么写的) 在文件中写入 module.exports = {     baseUrl:'/',//根路径     outputDir:'dist',//打包的时候生成的一个文件名     assetsDir:'assets',//静态资源目录(js,css,

  • vue 同局域网访问不到的问题及解决

    目录 vue 同局域网访问不到 方法一 方法二 vue项目配置在局域网下访问 1.vue配置 2.如果上述配置无法访问则配置以下 vue 同局域网访问不到 方法一 1. 处于同一个网段(PS:连同一个WiFi) 2. 重启本地环境 : (1)  yarn run dev --host 0.0.0.0(不需要修改配置文件) (2)  npm run dev --host (需要修改config/index.js ,把 host: 'localhost', 改为 host: '0.0.0.0') 3

随机推荐