Vue项目中如何实现无需重启的动态代理配置方法？

本文共计685个文字，预计阅读时间需要3分钟。

目录

1.背景

2.技术方案

2.1. 旧的配置方案 2.2. 新的配置方案思路

3.配置

3.1. 背景 当我们用vue构建项目时，常在vue.config.js中配置代理服务器地址。有时需要使用不同的地址。

目录

• 1.背景
• 2.技术方案
• 2.1 旧的配置方案
• 2.2 新的配置方案思路
• 3. 配置

1.背景

当我们vue构建项目的时候，都会在vue.config.js中配置我们需要代理的服务器地址。有时候我们需要使用不同后端服务器地址，也就是我们开发中所说的测试环境、灰度环境、正式环境等，这个时候如果我们需要使用不同的环境地址的时候，就需要使用命令或者手动修改vue.config.js中配置来重新启动项目。当项目项目越来越大的时候，我们需要很长的时间来启动项目，如此反复，极大影响我们开发进度。这个时候我们急需一种vue动态代理无须重启项目解决方案来提高我们的开发项目，以此为背景，萌生出了以下方案。

2.技术方案

2.1 旧的配置方案

我们在vue.config.js中常用的代理方案如下：

const port = process.env.port || process.env.npm_config_port || 80 // 端口 module.exports = { lintOnSave: false, devServer: { host: '0.0.0.0', port, open: false, proxy: { '/my-api': { target: 'www.baidu.com', ws: false, changeOrigin: true, } } } }

在启动项目的时候，只会读取一次配置文件，当再次修改target地址时，vue-cli是无法感知文件的变化，所以代理的还是旧的地址，所以我们需要重新启动项目来使配置生效。有没有一种方案，可以在修改配置的时候能使vue-cli感知到文件的变化，从而读取新的配置呢？方案入下：

2.2 新的配置方案思路

vue-cli 的代理是使用的www.baidu.com" }

当项目启动后，会读取我们的代理配置文件。我们在项目启动后，手动修改代理配置文件的代理地址，然后刷新页面，就可以使我们的新代理地址生效。

示例demo

github.com/atdow/vue-d…

以上就是vue动态代理无须重启项目解决方案详解的详细内容，更多关于vue 动态代理的资料请关注易盾网络其它相关文章！