proxy-toggle-plugin

基于webpack-dev-server，通过装饰webpack-dev-server实现不重启服务切换代理，理论上基于webpack-dev-server启动的服务都能够使用。

注意事项

目前经过测试，umi框架暂不支持此插件。（推测原因: umi的proxy不是基于webpack-dev-server的，而是基于umi的）

安装

// npm
npm i proxy-toggle-plugin -D

//yarn
yarn add proxy-toggle-plugin -D

使用

配置

通过webpack配置使用：

const ProxyTogglePlugin = require("proxy-toggle-plugin");
module.exports = {
  // ...
  plugins: [
    new ProxyTogglePlugin(),
  ],
  // ...
};

通过chainWebpack配置使用：

const ProxyTogglePlugin = require("proxy-toggle-plugin");
module.exports = {
  // ...
  chainWebpack: (config) => {
      config.plugin('proxy-toggle-plugin')
      .use(ProxyTogglePlugin)
  },
  // ...
};

注意：使用了这个插件之后，你不应该再去配置webpack.devServer.proxy。你应该按照上述实例的方式来写 proxy 配置，这是 proxy 的经典配置写法，其他写法不确保成功。

配置文件

// 将文件放置在根目录下
proxyToggle.config.js
// 案例
module.exports = {
    // puppeteer 登录相关
    user: {
        // 谷歌浏览器启动路径
        executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
        loginUrl: 'http://baas.uban360.net:21006/portal/#/login',
        user: 'xxx',
        password: '******'
    },
    proxy: {
        // 将你所有的proxy配置写进来
        list: {
            环境a: {
                '/(baas-)|(content-center)': {
                    target: 'http://baas.uban360.net:21006/',
                    changeOrigin: true,
                    needCookies: true
                },
                '/sfs': {
                    target: 'http://baas.uban360.net:21006',
                    changeOrigin: true,
                    secure: false
                },
                '/uti-': {
                    target: 'http://baas.uban360.net:21006',
                    changeOrigin: true,
                    secure: false,
                    needCookies: true
                }
            },
            环境b: {
                '/(baas-)|(content-center)': {
                    target: 'http://baas.uban360.net:2333/',
                    changeOrigin: true,
                    needCookies: true
                },
                '/sfs': {
                    target: 'http://baas.uban360.net:21006',
                    changeOrigin: true,
                    secure: false
                }
            }
        },
        // 默认的proxy配置的key
        defaultProxy: '环境a',
    }
}

切换代理

插件提供了默认的 select 组件，可以通过此来动态切换代理

注意事项

ProxySelect.umd.js，ProxySelect.css两个文件放置在public目录下

<script src="./ProxySelect.umd.js"></script>
<link rel="stylesheet" href="./ProxySelect.css">
<script>
    window.onload = function () {
        // x: 左偏移 y: 上偏移
        new ProxySelect({x: 10, y: 10})
    }
</script>

获取 proxy 列表

• url: /proxy/list
• method: GET
• res: {list: string[]}

切换 proxy 代理

• url: /proxy/change
• params: {proxy: string}
• method: GET

协议

MIT