Vue - Front End, Laravel back end Dev Server and Production differences

 Vue development server requires specification on port and address:

vue.config.js:

const port = process.env.port || process.env.npm_config_port || 9527 // dev port

// dev port

const host = '192.168.20.23';

module.exports = {

  /**

   * You will need to set publicPath if you plan to deploy your site under a sub path,

   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,

   * then publicPath should be set to "/bar/".

   * In most cases please use '/' !!!

   * Detail: https://cli.vuejs.org/config/#publicpath

   */

  publicPath: '/',

  outputDir: 'dist',

  assetsDir: 'static',

  lintOnSave: process.env.NODE_ENV === 'development',

  productionSourceMap: false,

  devServer: {

    port: port,

    host: host,

When vue started in development, it will server at specified port and host.

When vue is deployed to a server, I.E /var/html/vue. It will be served for http port 80 or https port 443 based on server configuration. I.E if server is <virtualhost: *443> DocumentRoot: /var/html/vue then the application will be HTTPS.

For development or production, Vue always need to specify API end point :

.env.production or .env.development file

VUE_APP_BASE_API = 'http://192.168.20.23:8000' Or 'https://myproduction'

For Laravel it works similarly, 

for development, laravel needs to specify where to start development server:

php artisan serve --host=0.0.0.0 --port=8080

and it needs to specify APP_URL in .env, and app.php

When deployed Laravel to production,

when laravel project folder is deployed to /var/html/Laravel/, it depends on whether server is servering HTTP or HTTPS <virtualHost:443>

When serving HTTPS, laravel is HTTPS. Of course when both Vue and Laravel are served, .htaccess file needs to be reconfigured so that Server knows when or which route to use laravel index.php router or Vue Router.

When both served at same port, there is no need to worry about CORS, but for development, if Vue starts at 9527, and laravel starts at 8000, then CORS headers need to be added( By default, Server blocks resource access for different origin , the port and URL has to be same)

For laravel to add CORS :

        // CORS, SERVER_ADDR is server address environment variable, when it is not found, if found not set, null will be used, it will use  'http://192.168.20.23:9527'

        $server_addr = env('SERVER_ADDR', 'http://192.168.20.23:9527');

        header('Access-Control-Allow-Origin: ' . $server_addr);

        header('Access-Control-Allow-Headers: *');

        header('Access-Control-Allow-Method: GET, POST, PUT, DELETE, OPTIONS');

https://www.interserver.net/tips/kb/deploy-laravel-project-apache-ubuntu/