I'm working on a Vue 2 app that uses multiple proxies. This solution was quite helpful for getting vue.config.js setup to handle multiple proxies. It uses /one and /two as the object keys. The example in the Vue docs uses ^/api and ^/foo as the object keys. What is the significance of the ^ in the Vue docs example?
1 Answer
Internally, the Vue.js CLI uses http-proxy-middleware. According to their docs, they use a globbing library called micromatch. Here is their documentation on the syntax: https://github.com/micromatch/micromatch#matching-features. The ^ represents an assertion that you are replacing the start of the path. That means that if you have a path /foo/bar/api/stuff, then the /api won't be removed from the path, however, if you have /api/foo/bar, it would result in /foo/bar. This syntax is however optional to specify and would work without it. It just makes the starting assertion explicit. Here is more information about the start assertion in micromatch's source code and documentation: https://github.com/micromatch/picomatch/blob/5467a5a9638472610de4f30709991b9a56bb5613/lib/constants.js?q=%5E#L92, https://github.com/micromatch/picomatch/tree/5467a5a9638472610de4f30709991b9a56bb5613#matching-special-characters-as-literals.