Subdirectory Laravel and Vue

Question

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).*$');```

The problem is in your laravel part. You should redirect / to /subdirectory and also change your route to Route::get('/subdirectory/{any}', 'FrontendController@app')->where('any', '^(?!api).*$'); — train_fox
– train_fox, Commented Feb 28, 2020 at 12:24
The point is that laravel is in a subfolder and the apache v-host is redirecting everything that goes to /subdirectory to /subdirectory/public, if i set the laravel route to /subdirectory/{any} I will have to access my url as: /subdirectory/subdirectory/{any} — Saulo Lins
– Saulo Lins, Commented Mar 3, 2020 at 13:37
Yes you have to, but since you are using vue to make a SPA it doesn't matter because you are showing correct url to user and just adding another subdirectory to your api urls. — train_fox
– train_fox, Commented Mar 4, 2020 at 13:10

Karthick Nagarajan · Accepted Answer · 2020-06-12 11:36:11Z

2

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/"
  }
})

edited Jun 12, 2020 at 11:36

Karthick Nagarajan

1,3462 gold badges15 silver badges29 bronze badges

answered Jun 12, 2020 at 9:26

Hendrikus van Katwijk

811 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Subdirectory Laravel and Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related