• When are proxies needed?
    • If your front-end application and back-end API server are not running on the same host, you need to proxy API requests to the API server in your development environment.

You need to configure vue.config.js, vue.config.js is an optional configuration file, configuration reference address. If this file exists in the project’s (package.json equivalent) root directory, it will be automatically loaded by @vue/cli-service.

After vue.config.js is configured, you need to restart NPM run serve

  • configurationdevServer
  • Type: Object
    • allwebpack-dev-serverAll options are supported.

Devserver. proxy can be a string pointing to the development environment API server:

module.exports = {
    // ...
    devServer: {
        port: 2105.// Local service access port number, http://localhost:2105/
        open: false.// Tell dev-server to open the browser after the server starts. Set it to true to open the default browser.
        // Proxy can be a string pointing to the development environment API server
        // This tells the development server to broker any unknown requests (those that do not match static files) to http://localhost:2105/
        proxy: 'https://stg.sznai.com'}},Copy the code

Two: If you want more proxy control behavior, you can also use onepath: optionsPairs of objects:

// All requests with/API in the path go through the proxy
/ / such as: axios. Get ('/API/user ') = > actual request address is https://stg.sznai.com/api/user
/ / local Request the Request URL: http://192.168.1.104:2105/api/user will be automatically forwarded to https://stg.sznai.com/api/user

module.exports = {
    // ...
    devServer: {
        port: 2105.// Local service access port number, http://localhost:2105/
        open: false.// Tell dev-server to open the browser after the server starts. Set it to true to open the default browser.
        // Configure the proxy
        proxy: {
          '/api': {
            target: 'https://stg.sznai.com'.ws: true.// Whether to enable WebSockets
            changeOrigin: true When proxying, you can set changeOrigin to true to override this behavior.
          },
          '/foo': {
            target: 'https://www.baidu.com'}}}},Copy the code