webpack中代理配置(proxyTable)
注:用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)的更多相关文章
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- webpack+vue-cli中代理配置(proxyTable)
在做vue的项目时,用到webpack打包工具,我们会发现本地开发开启的node服务地址请求接口的地址存在跨域问题.本地开启的服务地址是 http://localhost:8080 而服务器的地址是 ...
- 说下vue工程中代理配置proxy
这个代理配置不需要后台进行ngnix代理跳转了,前端可以做.在vue.config.js文件中进行配置,如下: module.exports = { publicPath: process.env.V ...
- webpack中babel配置 --- runtime-transform和babel-pollfill
webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...
- Webpack中SplitChunksPlugin 配置参数详解
代码分割本身和 webpack 没有什么关系,但是由于使用 webpack 可以非常轻松地实现代码分割,所以提到代码分割首先就会想到使用 webopack 实现. 在 webpack 中是使用 Spl ...
- IDE vscode识别webpack中alias配置路径
引言网上看到一篇关于 ctrl+鼠标左键无法识别别名路径的问题,最后有人回复的方法只能在ts项目中可以识别 https://segmentfault.com/q/1010000011911879 最后 ...
- 小技巧:webpack中@的配置和用法
好家伙, 当我们要各种两个文件去引用别的文件时,一般这么写 import msg from '../../msg.js' 那么如果文件藏得很深,'../'会变得很多,不美观,也不直观 所以我们又又又可 ...
- anaconda 在内网中代理配置
修改anaconda的配置文件,位置在c:\User(或“用户”)\current_user(当前用户)\.condarc,将以下内容拷贝进去, 替换原有内容, 修改 http://proxy.you ...
- webpack中字体配置,可以引入bootstrap
{test:/\.(eot|ttf|woff|woff2|svg)$/,loader:'file?name=fonts/[name].[ext]'} 将css中用到的字体全部提取存放到fonts目录下 ...
随机推荐
- cs224d 作业 problem set2 (三) 用RNNLM模型实现Language Model,来预测下一个单词的出现
今天将的还是cs224d 的problem set2 的第三部分习题, 原来国外大学的系统难度真的如此之大,相比之下还是默默地再天朝继续搬砖吧 下面讲述一下RNN语言建模的数学公式: 给出一串连续 ...
- java.lang
package cn.sxt; import java.lang.*; public class BooleanDemo { public static void main(Stri ...
- Tengine-Ngnix高级版
Tengine介绍 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫 ...
- innobackupex2.4选项参考
该innobackupex2.4选项参考¶ 此页面记录了innobackupex的所有命令行选项. 选项 --apply-log BACKUP-DIR通过应用xtrabackup_logfile位于同 ...
- is, ==, id, encode,
1. is 和 == 的区别 1. id(): 通过id()我们可以查看到⼀个变量表⽰的值在内存中的地址. id(变量) 返回给你这个变量的内存地址 is 比较是的内存地址 == 比较的是值 s ...
- webservice的使用-axis1-01
1.搭建axis服务器 1.1 下载axis-bin-1_4.zip文件并解压 1.2 拷贝\axis-1_4\webapps目录下的axis到tomcat目录下的webapps目录下并启动 1.3 ...
- Vue--入门篇
一.v-model和单选按钮(radio) <div id="app"> <input name="sex" value="男&qu ...
- Javascript高级程序设计--读书笔记之面向对象(一)
哈哈哈万物皆对象,终于到了js的面向对象篇. 一.属性类型 (1)数据属性 数据属性包含一个数据值的位置,在这个位置可以写入和读取数值,数据属性有四个描述器行为的特性 [[Configurable]] ...
- Angular 4 变更检测机制 ChangeDetectorRef 使用方法
1.在angular 2中,回调函数的返回结果,不会自动更新视图层的显示,可以用 ChangeDetectorRef 来驱动angular更新视图. import {ChangeDetectorRef ...
- aarch64 cross compile 交叉编译 opencv
需求 : linux host : UBUNTU opencv source : opencv 3.3.1.zip CMAKE : apt-get install cmake cmake-qt- ...