[Vuejs]-A unrelated vuejs app route handled by the server?

by

0👍

It would depend if you are in development mode or in a production build. In a development mode you can add or create a vue.config.js add config the devServer. The devServer you can proxy to your api. Let’s say you are running a NodeJS or PHP app on port 3000 you can add the following to vue.config.js. In this setup for npm run serve your http://localhost:8080/api would route to your api.

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000'
      }
    }
  },
}

If you are in production mode you are likely going to need a webserver like NGINX for apache. In Nginx for example you would need to separate the /api location to your api via proxy and the rest to your vue files. An example is below

...
      location /api {
            proxy_pass         http://myapi:3000;
            proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection "upgrade";
            expires off;
            access_log off;
            if_modified_since off;
            add_header Last-Modified $date_gmt;
            add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
            proxy_no_cache 1;
        }

        location / {
            try_files /path/to/my/vue/build/files /;
        }
...

Leave a comment