Vue.js 配置代理vue-cli
时间:2023-03-21
本文章向大家介绍Vue.js 配置代理vue-cli,主要内容包括vue脚手架配置代理、方法一、方法二、App.vue、main.js、使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue.config.js中写
vue脚手架配置代理
方法一
在vue.config.js中添加如下配置:
devServer:{
proxy:"http://localhost:5000"
}
说明:
- 优点:配置简单,请求资源时直接发给前端(8080)即可。
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
方法二
编写vue.config.js配置具体代理规则:
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
说明:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
- 缺点:配置略微繁琐,请求资源时必须加前缀。
App.vue
<template>
<div>
<button @click="getStudents">获取学生信息</button>
<button @click="getCars">获取汽车信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'App',
methods: {
getStudents(){
axios.get('http://localhost:8080/students').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
},
getCars(){
axios.get('http://localhost:8080/demo/cars').then(
response => {
console.log('请求成功了',response.data)
},
error => {
console.log('请求失败了',error.message)
}
)
}
},
}
</script>
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
},
})
原文地址:https://www.cnblogs.com/chuixulvcao/p/17238561.html
- 比较R语言机器学习算法的性能
- 【专业文章】六种常见的HTML5写法误用(二)
- CSS3动画,为你带来极致的视觉体验!
- 【高级编程】linux进程间通信总结
- JS 吸顶导航,告别“回到顶部”
- 用AlphaGo来做股票交易会怎样?机器学习预测股票靠谱么?
- 开发 | 深度神经网络可视化工具集锦
- CSS3三维变形,其实很简单!
- 使用 pandas处理股票数据并作分析
- 用R语言做时间序列分析(附数据集和源码)
- 【android开发】Android GUI系统学习1:Gralloc
- 【kaggle实战】从KNN,LR,SVM,RF到深度学习
- 开发 | 训练一个AI给颜值打分,公平公正!
- 【android开发】Android HAL模块实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 10分钟学会pillow图像处理16式
- 编译原理课程设计词法分析
- 30分钟学会XGBoost
- Linux页框分配器之内存碎片化整理
- 手把手教你实现"短信轰炸"
- 最全总结!聊聊 Python 调用 JS 的几种方式
- 爬取小说网站章节和小说语音播放
- JavaScript原型、原型链及原型链污染
- 报刊订阅管理系统的设计与实现
- 使用Pytest创建一个Python测试自动化项目
- 宾馆客房管理系统的设计与实现
- /leetcode 剑指 Offer 32 - I. 从上到下打印二叉树
- 使用Python和Chrome安装Selenium WebDriver
- 牛客网-从上到下打印二叉树
- leetcode 剑指 Offer 40. 最小的k个数