To serve a Vue-CLI project using Laravel's index.php file, you can create a new Laravel route that serves the Vue-CLI's index.html file. Here's an example:

  1. First, build your Vue-CLI project by running the following command:

    npm run build

    This will create a dist folder in your Vue-CLI project directory, which contains the compiled project files.

  2. Next, copy the contents of the dist folder to your Laravel public directory:

    cp -R /path/to/vue-cli-project/dist/* /path/to/laravel-project/public/

    Replace /path/to/vue-cli-project with the actual path to your Vue-CLI project directory, and /path/to/laravel-project with the actual path to your Laravel project directory.

  3. In your Laravel routes/web.php file, add a new route that serves the Vue-CLI index.html file:

    Route::get('/{any}', function () { return view('index'); })->where('any', '.*');

    This route will match any URL and return the Laravel index.blade.php view file.

  4. Create a new index.blade.php file in your Laravel resources/views directory:

    <!DOCTYPE html> <html> <head> <title>Laravel Vue-CLI</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="{{ asset('js/app.js') }}"></script> </body> </html>

    This file contains the necessary HTML and JavaScript code to render your Vue-CLI app.

  5. Finally, in your Vue-CLI src/main.js file, set the publicPath option to the URL of your Laravel project:

    module.exports = { // ... publicPath: process.env.NODE_ENV === 'production' ? '/public/' : '/' }

    Replace /public/ with the actual URL of your Laravel public directory.

With these steps, you should be able to serve your Vue-CLI app using Laravel's index.php file. Note that you may need to configure your Laravel and Vue-CLI projects to use the same domain and port to avoid cross-origin issues.

Have questions or queries?
Get in Touch