CODEWITHSUNDEEP
laravelvue.jslaravel-5
Saulo Lins
Saulo Lins

Reputation: 78

Subdirectory Laravel and Vue

I'm working with Laravel and VueJS, the laravel is in a subdirectory (www.dominio.com/subdirectory), I changed the settings of my apache vHost so that accessing that name would be redirected to the 'subdirectory / public' folder, however when I access it vuejs I run into this error:

enter image description here

when I access any sub route of the vue it can connect normal, but the main one gives this problem.

router/index.js

import Router from 'vue-router';
import Login from '@/components/Login';
import ForgotPassword from '@/components/ForgotPassword';
import Index from '@/components/Index';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: '/subdirectory',
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
      children: [
        {
          path: '',
          name: 'Login',
          component: Login,
        },
        {
          path: 'forgot-password',
          name: 'forgotPassword',
          component: ForgotPassword,
        },
      ],
    },

  ],
});

routes/web.php

<?php
//use Illuminate\Routing\Route;

use App\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;

Route::get('/{any}', 'FrontendController@app')->where('any', '^(?!api).*$');```

Upvotes: 1

Views: 3238

Answers (1)

Hendrikus van Katwijk
Hendrikus van Katwijk

Reputation: 81

In addition to using base:'your-sub-directory' and mode:history in your vue-router file, you also need to configure laravel mix to compile the files to the correct subdirectory using publicPath

in your webpack.mix.js file add publicPath and recompile your code :

mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, 'resources/js/')
    },
  },
  output:{
    publicPath: "/your-sub-directory/"
  }
})

Upvotes: 2

Related Questions