Vue-CLI 3.x 设置反向代理

最新推荐文章于 2025-07-09 14:10:25 发布

研之有物

最新推荐文章于 2025-07-09 14:10:25 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

文章标签： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43067157/article/details/82079792

本文档介绍了在Vue CLI 3.x项目中如何新建配置文件并设置反向代理，以解决跨域问题。通过创建文件，并在其中配置代理规则，然后在项目请求中使用该代理。详细步骤及更多内容可查阅Vue CLI官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在项目中使用了Vue CLI 3.0版本，项目中需要设置反向代理解决跨域问题，下面记录一下设置过程。

新建配置文件

在项目的根目录下新建 vue.config.js 文件，自Vue CLI 3开始，项目中所有的配置信息都写在这个文件中（2在config目录中配置）。

配置反向代理

设置代理

module.exports = {
   
   
  devServer: {
   
   
    // 设置代理
    proxy: {
   
   
      "/v1": {
   
   
        target: "http://127.0.0.1:8081/",

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

研之有物

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue配置反向代理的使用

xiaowude_boke的博客

06-20

1989

宝塔服务器配置反向代理

vue反向代理解决跨域问题

qq_43919485的博客

04-12

1024

vue-cli3 在项目根目录下的vue.config.js（没有就新建） module.exports = { //反向代理，跨域 pluginOptions: { proxy: { enabled: true, context: ‘/api’, options: { target: ‘/api’, changeOrigin: true, ws:true, //websocket pathRewrite:{ ‘^/api’:’’ } } } } } 全局使用，在mian.js Vue

4 条评论您还未登录，请先登录后发表或查看评论

vue/cli 3 proxy配置代理

热门推荐

weixin_43617604的博客

05-21

1万+

proxyTable: { // 代理规则 '/api': { // 配置的url请求名字开头 // 代理的目标服务器地址,这个路径是我代理到服务器,即你要请求的第三方接口 target: 'http://10.18.110.107', // https请求需要该设置 secure: false, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题.

vue项目配置proxy反向代理

weixin_43254676的博客

05-05

1769

1、找到vue.config.js文件在项目根目录下查找是否有vue.config.js，如果没有则手动创建，内容如下： module.exports = { // devServer的配置 devServer: { // 自定义端口 port: 8888, // 自动打开浏览器 open: true, // 用于配置反向代理 proxy: { // 代理请求，匹配所有以/api开头的请求 '/api': {

vue-cli构建项目反向代理配置

吾日三省吾身：高否？富否？帅否？否！否！否！安心上班吧……

06-15

8801

vue-cli构建项目反向代理配置

Vue-CLI3.x 设置反向代理的方法

01-19

最近在项目中使用了Vue CLI 3.0版本，项目中需要设置反向代理解决跨域问题，下面记录一下设置过程。如何安装vue-cli3呢？首先，你要有一个nodejs环境 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 ...

Vue-CLI 3.X 部署项目至生产服务器的方法

10-17

Vue-CLI 3.X 是一个基于 Vue.js 进行快速开发的完整系统，它提供了一个基于 Node.js 的开发环境。当我们使用 Vue-CLI 3.X 创建的项目开发完成后，通常需要将项目部署到生产服务器上，以供用户访问。Vue-CLI 3.X 的...

详解vue-cli构建项目反向代理配置

01-19

本文介绍了vue-cli构建项目反向代理配置，分享给大家，具体如下： proxyTable: {//配置请求代理 '/dlsys':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlsys': '/dlsys' } }, '/...

Vue-CLI 4.x 项目自动化部署至服务器指南

Vue-CLI 4.x作为一个现代JavaScript的前端开发框架，它不仅提供了一个高效的开发环境，而且还提供了通过插件系统扩展功能的能力。在本篇中，我们将重点探讨如何使用Vue-CLI 4.x来自动部署项目至服务器，特别涉及到...

vue反向代理

小混子得得的博客

04-21

242

反向代理 vue src同级目录添加vue.config.js module.exports={ publicPath:"./", devServer:{ proxy:{ '/api':{ target:'http://localhost:3000', changeOrigin:true, pathRewrite:{ '^/api':'' ...

vue项目的反向代理

weixin_63651791的博客

07-03

1306

【代码】vue项目的反向代理。

Vue反向代理服务器

qq_43789598的博客

07-04

384

Vue反向代理服务器

vue配置反向代理

weixin_44387746的博客

07-26

2574

1.首先在项目根目录下创建 vue.config.js 文件 2.在 vue.config.js 文件中添加以下代码 module.exports = { devServer: { proxy: { '/api': { target: 'http://m.baidu.com',//目标地址 ws: true, 是否启用websockets changeOri

vue @vue/cli3 配置代理proxy

黄彪博客

09-05

1万+

文章目录文章参考如何配置proxy 文章参考 vue-cli 3.0版本，配置代理Proxy，不同环境不同target（生产环境，uat环境和本地环境的配置） https://cli.vuejs.org/zh/config/#devserver-proxy 如何配置proxy 在项目的跟目录下创建vue.config.js文件添加如下配置 module.exports = { o...

vue反向代理（跨域）

weixin_45280871的博客

04-17

408

vue-cli 的反向代理设置情况1 1.在根目录下创建vue.config.js文件在该文件下，写入如下代码（每次修改配置文件之后要重启） module.exports = { publicPath: './', devServer: { port: 8080, open: true, // 反向代理配置 proxy: { '/api': ...

vue 跨域 反向代理

zyx的博客

03-12

3148

Nginx proxy_pass 本地调试跨域接口前言Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了.Igor 将源代码以类BSD许可证的形式发布.尽管还是测试版,但是,Nginx...

vue开发模式反向代理配置

qq_38738083的博客

05-07

5672

大家在做vue开发的时候难免会遇到跨域的问题，一般解决的办法有两种，后端配置cors，大部分框架都集成了相应的配置文件，另一种就是前段设置反向代理，而笔者今天要说的就是vue生产模式的反向代理。 vue cli 2.x: proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/a...

Vue开发阶段利用反向代理解决跨越问题

qq_15557771的博客

10-23

1053

1.服务器环境，使用node搭建一个Express服务器，很简单的： var express = require('express'); var app = express(); var fs = require("fs"); var bodyParser = require('body-parser'); var multer = require('multer'); //设置跨域访问 ...