Why not render my components in Vue and Vue Router production?

Question

Deploy a Laravel and Vue application using Vue Router, but the components are not mounted on my div with id app, what could be happening?

The host is a shared hosting, the Laravel application is in a project folder

I have defined my APP_URL and ASSET_URL variables to my mydomain.com/project/

On Vue Router routes the starting point is /admin

const routes = [    
{
  path: '/admin',
 children: [
     ...]

Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'history',
    routes
})

The index file of the public folder is fine, in the first instance I show the login and it is displayed correctly, it validates the user, login and everything, but when I log in from the backend I redirect to the path admin is where my vue router acts.

What may be happening, I tried everything, to start the path with / on my vue router routes, but I am not successful.

I do not get any type of error in console or in the log of laravel

Edit

new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App)
});

Do you hit your index.php? Is your app.js included and does it have the expected contents? — PtrTon
@PtrTon If even the blank page shown loads the styles and the app.js, but nothing is painted in the view. — DarkFenix
Seeing as you don't get any console errors, maybe check for php errors in the logs? Alternatively try recompiling your javascript and double check your .env files. I wouldn't really know any other things which might break your js from loading. — PtrTon

Estradiaz Estradiaz · Accepted Answer · 2019-08-23T04:13:52

My guess is you missed to set the URL offset/ base.

Add base: "/project/" to the router options

Why not render my components in Vue and Vue Router production?

1 Answers