注:用axios请求

1,下载axios

npm i axios --save

2,在config文件下的index.js中配置代理地址

   参考:https://vuejs-templates.github.io/webpack/proxy.html
  举例:localhost:8080/api/xxx 代理到 http://192.168.10.183:8103/api/xxx,如果用pathRewrite重写则代理到http://192.168.10.183:8103/xxx
  将'/api'转为'/'
  proxyTable: {
'/api': {// '/api':匹配项
target: 'http://192.168.10.183:8103',// 接口的域名
     // secure: false,// 如果是https接口,需要配置这个参数
changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
     // pathRewrite: {// 如果接口本身没有/api需要通过pathRewrite来重写了地址
     // '^api': ''
// } }
}

3.用axios请求资源

参考:https://www.npmjs.com/package/axios
// 引入axios
import axios from 'axios'
export function getProductTree() {
 // 用axios.get()请求资源
return axios.get('/api/pageblock/getProductCategoryTree')
}

4.页面中请求资源

<script>
import { getProductTree } from 'api/product-tree.js' export default {
created() {
this._getProductTree()
},
methods: {
_getProductTree() {
// 页面加载时请求资源
getProductTree().then(data => {
console.log(data)
})
}
}
}
</script>

webpack中代理配置(proxyTable)的更多相关文章

  1. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  2. webpack+vue-cli中代理配置(proxyTable)

    在做vue的项目时,用到webpack打包工具,我们会发现本地开发开启的node服务地址请求接口的地址存在跨域问题.本地开启的服务地址是 http://localhost:8080 而服务器的地址是 ...

  3. 说下vue工程中代理配置proxy

    这个代理配置不需要后台进行ngnix代理跳转了,前端可以做.在vue.config.js文件中进行配置,如下: module.exports = { publicPath: process.env.V ...

  4. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  5. Webpack中SplitChunksPlugin 配置参数详解

    代码分割本身和 webpack 没有什么关系,但是由于使用 webpack 可以非常轻松地实现代码分割,所以提到代码分割首先就会想到使用 webopack 实现. 在 webpack 中是使用 Spl ...

  6. IDE vscode识别webpack中alias配置路径

    引言网上看到一篇关于 ctrl+鼠标左键无法识别别名路径的问题,最后有人回复的方法只能在ts项目中可以识别 https://segmentfault.com/q/1010000011911879 最后 ...

  7. 小技巧:webpack中@的配置和用法

    好家伙, 当我们要各种两个文件去引用别的文件时,一般这么写 import msg from '../../msg.js' 那么如果文件藏得很深,'../'会变得很多,不美观,也不直观 所以我们又又又可 ...

  8. anaconda 在内网中代理配置

    修改anaconda的配置文件,位置在c:\User(或“用户”)\current_user(当前用户)\.condarc,将以下内容拷贝进去, 替换原有内容, 修改 http://proxy.you ...

  9. webpack中字体配置,可以引入bootstrap

    {test:/\.(eot|ttf|woff|woff2|svg)$/,loader:'file?name=fonts/[name].[ext]'} 将css中用到的字体全部提取存放到fonts目录下 ...

随机推荐

  1. flask编程规范

    参考:http://dormousehole.readthedocs.org/en/latest/styleguide.html   Flask遵循的是Pocoo的编程规范,Pocoo遵守PEP8的规 ...

  2. Win10+CentOS7双系统引导修复

    在有Win10的系统下安装了CentOS7后,CentOS7的引导并不会像CentOS6一样自动加载入Win10驱动.难道是grub2不能引导Win驱动?查了一下资料原来是CentOS不能识别Win1 ...

  3. javaScript 通过location对象获取项目的url

    项目中有些要通过jQuery 动态加载,其中需要一些路径,使用相对路径会出现错误,报 $("#t1").html("设置或返回从井号 (#) 开始的 URL(锚)---& ...

  4. upc组队赛7 Star in Parentheses

    Star in Parentheses 题目描述 You are given a string S, which is balanced parentheses with a star symbol ...

  5. Java对象finalize()方法

    Java提供了一种在对象即将被销毁时执行资源释放的方法.在Java中创建对象,但是不能销毁对象.JVM运行一个称为垃圾收集器的低优先级特殊任务来销毁不再引用的所有对象. 垃圾回收器给我们一个机会,在对 ...

  6. Node.js、vue.js的使用

    Vue.js的使用 1.下载Node.js 2.打开cmd 3.执行命令 npm i 4.输入命令 npm run serve 5.浏览器打开  http://localhost:8080

  7. Java学习第一次总结

    在此之前我需要声明一下,我不载过多的评论知识点的简单与难易程度.写出来只是为了方便使用,现阶段追求的是实在.㈠①自动类型转换由低到高byte.short.char→int→long→flot→doub ...

  8. mvnw简介

  9. Android毕业四年升P8,年收入超100w,他是如何做到的?

    很多人从事Android开发工作多年,走过的弯和坎,不计其数,经历的心酸难与外人道也.相信大家感触最深的还是:选择大于努力.选择正确的方向,才能够走的更远,更踏实. 今天我来分享一下自己心得体会,并没 ...

  10. Python升级3.多

    本文主要介绍在Linux(CentOS)下将Python的版本升级为3.6.2的方法 众所周知,在2020年python官方将不再支持2.7版本的python,所以使用3.x版本的python是必要的 ...