Deploy a Laravel-Vue project to a subdirectory

How-to.md

The guide how to deploy a Laravel-Vue project to a subdirectory.

Let's assume we want to deploy our app to http://example.com/projects/laravel-vue-demo/. Here's what you will need to do:

1. Add the next keys to your .env config:

APP_PUBLIC_PATH=
VUE_PUBLIC_PATH=/

Then create .env.production with the next content:

APP_PUBLIC_PATH=/projects/laravel-vue-demo
VUE_PUBLIC_PATH=/projects/laravel-vue-demo/

2. Open resources/assets/src/router/index.js and edit Router constructor in this way:

const router = new Router({
  base: process.env.BASE_URL,
  mode: 'history',
  routes: ROUTES
})

3. Open webpack.mix.js and update configs:

mix.options({
    resourceRoot: process.env.VUE_PUBLIC_PATH,
    ...
});

mix.webpackConfig({
    output: {
        publicPath: process.env.VUE_PUBLIC_PATH
    },
    plugins: [
        new EnvironmentPlugin({
            // Application's public url
            BASE_URL: process.env.VUE_PUBLIC_PATH
        })
    ],
    ...
});

4. Open config/app.php and add the next config key:

return [
    'public_path' => env('APP_PUBLIC_PATH', ''),
    ...
]

5. Open resources/views/application.blade.php and prepend config('app.public_path') . to all mix() calls.

Before:

<link rel="stylesheet" href="{{ mix('/vendor/fonts/fontawesome.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate.css') }}" class="theme-settings-theme-css">
<script src="{{ mix('/vendor/js/material-ripple.js') }}"></script>
<script src="{{ mix('/entry-point.js') }}"></script>

After:

<link rel="stylesheet" href="{{ config('app.public_path') . mix('/vendor/fonts/fontawesome.css') }}">
<link rel="stylesheet" href="{{ config('app.public_path') . mix('/vendor/css/theme-corporate.css') }}" class="theme-settings-theme-css">
<script src="{{ config('app.public_path') . mix('/vendor/js/material-ripple.js') }}"></script>
<script src="{{ config('app.public_path') . mix('/entry-point.js') }}"></script>

Also, you will need to update ThemeSettings' pathResolver method:

pathResolver: function(path) {
    var resolvedPaths = {
        // Core stylesheets
        //
        @foreach (['bootstrap', 'appwork', 'colors'] as $name)
        '{{ $name }}.css': '{{ mix("/vendor/css/{$name}.css") }}',
        '{{ $name }}-material.css': '{{ mix("/vendor/css/{$name}-material.css") }}',
        @endforeach

        // UI Kit
        'uikit.css': '{{ mix("/vendor/css/uikit.css") }}',

        // Themes
        //
        @foreach (['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'] as $name)
        'theme-{{ $name }}.css': '{{ mix("/vendor/css/theme-{$name}.css") }}',
        'theme-{{ $name }}-material.css': '{{ mix("/vendor/css/theme-{$name}-material.css") }}',
        @endforeach
    }

    return '{{config('app.public_path')}}' + (resolvedPaths[path] || path);
}

6. Upload the project to the subdirectory in the document root of your remote server. For example, I uploaded the project to htdocs/laravel-vue-demo/.

7. Configure your server. My Apache config:

Alias /projects/laravel-vue-demo/ C:/xampp/htdocs/laravel-vue-demo/public/
<Directory "C:/xampp/htdocs/laravel-vue-demo/public/">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
</Directory>

Nginx configuration you can find in the official Laravel guide: https://laravel.com/docs/6.x/deployment#server-configuration