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

Question

我希望 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/**',
        }
    }
}

Answer 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
        }
    }],
}

Answer 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;
                    }
                },
            },
        }
    }
}

Answer 3

或者，您可以使用 Regex 来匹配 url，不包括前缀：

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

Answer 4

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

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

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

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

Vue, how do I proxy everything excluding a specific path?

vue.js

webpack-dev-server