如何修改proxy后不重启。前言平常在使用vue-cli开发vue项目本地调试时前端需要通过vue.config.js

前言

平常在使用vue-cli开发vue项目本地调试时前端需要通过vue.config.js配置devServer从而避免跨域问题,前期还好但是越往后面走项目越大修改devServer配置后需要去反复的重启项目无疑这会消耗很多时间浪费开发时间,举个列子:后端同事A:你连我本地调吧。前端B:沃*,又要重启项目。这篇文章主要用来解决这一问题避免修改devServer需要重启项目。

前提需知

首先加入你是用vue-cli这个脚手架开发,那么你会发现devServer用的是http-proxy-middleware这个中间件,一些配置属性都在里面就不做一一列举了。
属性router:object/function,且可以重写target.

手把手

第一步

为了验证这个效果我们自己手动搭建node服务器和vue-cli前端页面:之前写过就不重复细说了,代码。有需要的可以看我这篇文章node+koa+axios实现一个简单的图片上传和回显功能 - 掘金 (juejin.cn)
配置vue.config.js

module.exports = {
    lintOnSave: false,
    // 选项...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3001',
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

新建一个配置文件env.js

module.exports ={
    url:"http://localhost:3000"
}

修改vue.config.js

module.exports = {
    lintOnSave: false,
    // 选项...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3001',
                pathRewrite: {
                    '^/api': '/'
                },
                 router: function () {
                  delete require.cache[require.resolve('./env.js')]
                  const url = require('./env').url
                  console.log('我要重写target了')
                  return url
                }
            }
        }
    }
}

require.cache[require.resolve('./env.js')]:这里主要是用来清空require的缓存拿到最新修改的url
为什么要这样使用requeire,而不是直接修改router:我是这样理解的因为require导入是有缓存的,所以这也是为什么我们修改vue.config.js后需要手动重启项目的原因。
具体关于reuqire缓存的可以查看阮一峰的require() 源码解读

效果图

ok啦,再也不怕后端叫你去联调他的本地麻烦啦。点个赞吧~