webpack+vue-cli中代理配置(proxyTable)
在做vue的项目时,用到webpack打包工具,我们会发现本地开发开启的node服务地址请求接口的地址存在跨域问题。本地开启的服务地址是
http://localhost:8080
而服务器的地址是
http://192.168.28.92:9096/api/
如果在你的axios请求中直接写服务器的地址进行请求,就会发生跨域的问题。如下
这就需要webpack中的proxytable代理进行配置,来解决这个跨域的问题。
在config/index.js文件中:
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target: 'http://192.168.28.92:9096',
// secure: false,// 如果是https接口,需要配置这个参数
changeOrigin: true,//接口跨域,则需要进行这个参数配置
//pathRewrite: {
// '^api': '' //如果接口本身没有/api,则需要通过pathRewrite来重写
//}
}
},
}
当你的服务器接口地址是:
http://120.79.61.208:36912/shop/
此时接口地址中没有/api
则需要通过pathRewrite对接口进行重写
proxyTable: {
'/api':{
target: 'http://192.168.28.92:9096',
// secure: false,// 如果是https接口,需要配置这个参数
changeOrigin: true,//接口跨域,则需要进行这个参数配置
pathRewrite: {
'^api': '' //如果接口本身没有/api,则需要通过pathRewrite来重写
}
}
则在axios请求中的url:
webpack+vue-cli中代理配置(proxyTable)的更多相关文章
- 说下vue工程中代理配置proxy
这个代理配置不需要后台进行ngnix代理跳转了,前端可以做.在vue.config.js文件中进行配置,如下: module.exports = { publicPath: process.env.V ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- vue cli 3 lintOnSave 配置有时无效问题
一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...
- Vue 项目中 ESlint 配置
前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...
- vue.cli 中使用 less 来写css样式
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...
- vue cli 3.x 配置使用 sourceMap
项目使用vue cli 3.x搭建,没有了配置文件,如何更方便的查找到对应的scss文件,配置项目支持sourceMap方式? 分二步走: 1.项目根目录(不是src目录,不要搞错了)添加vue.co ...
- 手把手教你如何安装使用webpack vue cli
1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...
随机推荐
- 《剑指offer》— JavaScript(30)连续子数组的最大和
连续子数组的最大和 题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好 ...
- 多线程(模拟买票)-----java基础知识总结
这次的的问题引入的比较深入,如果看了这篇博客,不看下一篇,你会很懵逼. 代码: package com.day13.math; /** * 类说明 :模拟三个窗口同时售票 * @author 作者 : ...
- 「Vue」vue生命周期
Vue的生命周期 beforeCreate---created---beforeMount---mounted---(beforeupdate---updated :数据有更新时才会执行)---bef ...
- 在线Python学习网站
目前我们使用的Python集成环境是Anaconda3,然后使用Jupyter Notebook和Spyder两个开发环境 Goole推出了在线的开发环境,在线网站: https://colab.re ...
- 阿里云ECS使用cloudfs4oss挂载OSS
cloudfs4oss可以帮我们将OSS直接挂载到ECS上,就像一个目录一样方便访问.使用方法: 1.安装配置环境: yum install libcurl libcurl-devel openssl ...
- Spark记录-Scala类和对象
本章将介绍如何在Scala编程中使用类和对象.类是对象的蓝图(或叫模板).定义一个类后,可以使用关键字new来创建一个类的对象. 通过对象可以使用定义的类的所有功能. 下面的图通过一个包含成员变量(n ...
- 新.Net架构必备工具列表
N多年前微软官网曾发了.Net下必备的十种工具,N多年过去了,世异时移,很多东西都已经变化了,那个列表也似乎陈旧了.而且,该文也只是对十种工具独立的介绍,显得有些罗列的感觉,是不是每个工具都是同等重要 ...
- json转化数组
//json格式数据 $data = '[{ "F_ModuleId": "1", "F_ParentId": "0", ...
- 为什么今天的L4无人驾驶无法到达终局(转)
本文来自于公众号驭势未来,是驭势科技的微信公众平台,本博客收录的这篇文章版权作者吴甘沙,博客中仅对部分内容进行编辑. 作者:吴甘沙 原文链接:here 声明:文中的观点只代表版权作者的观点,本转载不涉 ...
- 原生JS获取元素的位置与尺寸
1.内高度.内宽度: 内边距 + 内容框 element.clientWidth element.clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 element.offs ...