Vue，我如何代理除特定路径之外的所有内容？答案

【问题标题】：Vue, how do I proxy everything excluding a specific path?Vue，我如何代理除特定路径之外的所有内容？
【发布时间】：2020-01-15 12:00:14
【问题描述】：

我希望 webpack-dev-server（在 Vue CLI 下方）将不以 /app 开头的所有内容代理到 http://127.0.0.1:8000，我该如何实现？

例如：

http://localhost:8080/app 服务于webpack-dev-server
http://localhost:8080/app/questions 服务于webpack-dev-server
http://localhost:8080/ 代理到 http://127.0.0.1:8000
http://localhost:8080/about-us 代理到 http://127.0.0.1:8000

我已经在我的 vue.config.js 中尝试过这个：

module.exports = {
    configureWebpack: {
        devServer: {
            port: 8080,
            proxy: 'http://127.0.0.1:8000!/app/**',
        }
    }
}

【问题讨论】：

标签： vue.js webpack-dev-server

【解决方案1】：

您可以通过像这样在代理设置中定义绕过功能来做到这一点。

devServer: {
    index: '', // specify to enable root proxying
    proxy: [{
        context: () => true,
        target: 'http://127.0.0.1:8000',
        bypass: (req) => {
          if (req.url.startsWith('/app')) {
            return req.url // do not proxy
          }
          return false
        }
    }],
}

【讨论】：

这很好用，只是我无法让根代理通过。 http://localhost:8080/ 不代理到 http://localhost:8000。
@Matt 根据documentation，默认情况下，开发服务器不代理根路径。查看更新的答案以使其正常工作。
谢谢@Nafees - 我仍然有根问题，我已经发布了一个答案来概述它们。

【解决方案2】：

根据 Nafees 的回答，以下代码使我能够访问 /app/ 并且每个其他 URL 都会被代理。除了/ 之外的所有内容，它不会被转发到代理。

module.exports = {
    publicPath: '/app/',

    configureWebpack: {
        devServer: {
            index: '',
            proxy: {
                '/': {
                    target: 'http://127.0.0.1:8000',
                    bypass: function(req, res, proxyOptions) {
                        if (req.url.startsWith('/app/')) {
                            return req.url;
                        }

                        return null;
                    }
                },
            },
        }
    }
}

【讨论】：

【解决方案3】：

或者，您可以使用正则表达式来匹配不包括前缀的 url：

devServer: {
    port: 8080,
    proxy: {
        "^(?!/app)": {
            target: "http://127.0.0.1:8000",
            changeOrigin: true
        }
    }
}

【讨论】：

尝试改进答案的格式并告诉我们这解决了以前的答案没有解决的问题

【解决方案4】：

我已经使用vue-cli-plugin-proxy 解决了这个问题。安装后，我将以下内容添加到我的vue.config.js。

module.exports = {
    publicPath: '/app',

    pluginOptions: {
        proxy: {
            context: '!/app/**',
            options: {
                target: 'http://127.0.0.1:8000',
            }
        }
    },
}

【讨论】：