• When developing Vue locally, we can configure devServer with vue.config.js.

  • In fact, there are configuration agents on the server side, but our local usually not special case, just need to configure devServer through vue.config.js.

  • However, when we need to embed native HTML in Vue or we don’t configure devServer through vue.config.js, we need to install the native Nginx configuration agent.

  • After downloading and installing Nginx, start Nginx, go to nginx.conf, and add agent proxy_pass to our configured virtual host.

  • Nginx. conf, after adding the proxy, $nginx -s reload refreshes the configuration.

    Server {# listen port 8080; Server_name localhost; Root /usr/local/var/dzm; Location / {index index.html; } // listen for the link containing/API/location/API / {// match and forward to the domain address proxy_pass http://api.test.com/; }}Copy the code

  • Used in Vue code

    / / the Vue lifecycle methods mounted () {axios ({url: 'http://localhost:8080/api/union/center/pageinfo', method: 'get' headers: { 'X-Token': 'slnZOg9VrV8Xo8i5IVudlvRLgmBBlzUTNRMIn6f5EqbkFVnkPmMOJJf1pjN9' } }) .then(res => { console.log(res) }) .catch(err => { console.error(err) }) }Copy the code

    Of course, when using Axios, you can wrap the previous http://localhost:8080 as baseURL and headers into the common configuration.

    It is important to note that the/API/section must follow the URL. Do not configure it into the public baseURL, otherwise the request will fail.

    Equivalent url: ‘/ API/union/center/pageinfo, axios public baseURL:’ http://localhost:8080 ‘, this configuration.