Level 104
You can set a base URL whenever you instantiate a Vue Router instance.
Aug 23, 2022
5
Level 1
Run Laravel Vite Vue.js build without Artisan
I am a newbie learning Vue.js and I am using it with Laravel. I have decent experience with Laravel. Previously, without any frontend setup, I simply used to go to http://localhost/my-project/public and my Laravel homepage would display as everything used to be in the public directory.
Now I am using Vue with Vite as my build tool. After running npm run build, the build assets by Vite are placed inside public/build directory. I run the dev environment using npm run dev and php artisan server and I can access the app on http://localhost:8000 but how do I access my app without using Artisa or without any dev servers running?
This is my /public directory structure:
│ .htaccess
│ favicon.ico
│ index.php
│ robots.txt
│
├───build
│ │ manifest.json
│ │
│ └───assets
│ app.5bcb0e65.js
│ app.dd96aa6d.css
..other images, fonts
Currently, When I go to the URL http://localhost/my-project/public/dashboard, I see nothing but a blank white screen and an error in the console saying [Vue Router warn]: No match found for location with path "/my-project/public/dashboard" but with php artisan server, I can access http://localhost:8000/dashboard without any issues.
This is my routes\web.php file contents:
...
Route::any('/', function () {
return view('welcome');
});
Route::any('/{slug}', function () {
return view('welcome');
})->where('slug', '([A-z\d\-\/_.]+)?');
Level 1
@tykus This is my router.js:
const routes = [
{ path: '/', component: Main, name: 'main', children:
[
{ path: '/dashboard', component: Dashboard, name: 'dashboard' },
..Other child routes
]
},
{ path: '/login', component: Login, name: 'login' },
];
What do I need to do here?
Level 104
@iamsubingyawali all I see is route definitions; where is the Router instantiated (how you instantiate varies depending on the which version you are using)?
Level 1
@tykus Here it is:
// Import Vue Router
import { createRouter, createWebHistory } from 'vue-router';
// Importing the components
...
const routes = [
{ path: '/', component: Main, name: 'main', children:
[
{ path: '/dashboard', component: Dashboard, name: 'dashboard' },
...Other route definitions
]
},
{ path: '/login', component: Login, name: 'login' },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
Level 104
@iamsubingyawali something like this I believe:
const router = createRouter({
history: createWebHistory('myproject/public'),
routes,
});
2 likes
Please or to participate in this conversation.