In local server Laravel9 and vue3 working fine. But when I am deploy my application on namecheap server Vue js not working. Here is my code and folder structure [Folder Sturcture][1] [1]: https://i.stack.imgur.com/dh8sT.png index.php code here: <?php
use Illuminate\Contracts\Http\Kernel;
use Illuminate\Http\Request;
define('LARAVEL_START', microtime(true));
/*
|--------------------------------------------------------------------------
| Check If The Application Is Under Maintenance
|--------------------------------------------------------------------------
|
| If the application is in maintenance / demo mode via the "down" command
| we will load this file so that any pre-rendered content can be shown
| instead of starting the framework, which could cause an exception.
|
*/
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
require $maintenance;
}
/*
|--------------------------------------------------------------------------
| Register The Auto Loader
|--------------------------------------------------------------------------
|
| Composer provides a convenient, automatically generated class loader for
| this application. We just need to utilize it! We'll simply require it
| into the script here so we don't need to manually load our classes.
|
*/
require __DIR__.'/orginfoodapp/vendor/autoload.php';
/*
|--------------------------------------------------------------------------
| Run The Application
|--------------------------------------------------------------------------
|
| Once we have the application, we can handle the incoming request using
| the application's HTTP kernel. Then, we will send the response back
| to this client's browser, allowing them to enjoy our application.
|
*/
$app = require_once __DIR__.'/orginfoodapp/bootstrap/app.php';
$kernel = $app->make(Kernel::class);
$response = $kernel->handle(
$request = Request::capture()
)->send();
$kernel->terminate($request, $response);
webpack.mix.js code here const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
[in public folder][2] [2]: https://i.stack.imgur.com/Cc8x4.png
Linking app.css and app.js in app.blade.php:
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>OrginFood Application</title>
<!-- Favicon-->
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Bootstrap Core Css -->
<link href="{{ asset('assets') }}/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Waves Effect Css -->
<link href="{{ asset('assets') }}/plugins/node-waves/waves.css" rel="stylesheet" />
<!-- Animation Css -->
<link href="{{ asset('assets') }}/plugins/animate-css/animate.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="{{ asset('assets') }}/css/style.css" rel="stylesheet">
<link href="{{ asset('assets') }}/css/themes/all-themes.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ mix('/css/app.css') }}" />
</head>
<body>
<div id="app">
@include('components.nav')
@include('components.sidebar')
<section class="content">
@yield('content')
</section>
</div>
<!-- Jquery Core Js -->
<script src="{{ asset('assets') }}/plugins/jquery/jquery.min.js"></script>
<script src="{{ mix('/js/app.js') }}"></script>
<!-- Bootstrap Core Js -->
<script src="{{ asset('assets') }}/plugins/bootstrap/js/bootstrap.js"></script>
<!-- Select Plugin Js -->
{{-- <script src="{{ asset('assets') }}/plugins/bootstrap-select/js/bootstrap-select.js"></script> --}}
<!-- Slimscroll Plugin Js -->
<script src="{{ asset('assets') }}/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Waves Effect Plugin Js -->
<script src="{{ asset('assets') }}/plugins/node-waves/waves.js"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="{{ asset('assets') }}/plugins/jquery-countto/jquery.countTo.js"></script>
<!-- Validation Plugin Js -->
<script src="{{ asset('assets') }}/plugins/jquery-validation/jquery.validate.js"></script>
<!--Sweet Alert -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://unpkg.com/vue@3"></script>
<!-- Custom Js -->
<script src="{{ asset('assets') }}/js/admin.js"></script>
<script src="{{ asset('assets') }}/js/pages/examples/sign-in.js"></script>
<script src="{{ asset('assets') }}/js/demo.js"></script>
@if (session('success'))
<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
Toast.fire({
icon: 'success',
title: '{{ session('success') }}'
})
</script>
@endif
@if (session('qty'))
<script>
Swal.fire({
icon: 'error',
title: 'Oops...',
text: '{{ session('qty') }}',
})
</script>
@endif
</body>
</html>
