子目录 Laravel 和 Vue答案

【问题标题】：Subdirectory Laravel and Vue子目录 Laravel 和 Vue
【发布时间】：2020-06-12 12:19:45
【问题描述】：

我正在使用 Laravel 和 VueJS，laravel 位于子目录（www.dominio.com/subdirectory）中，我更改了我的 apache vHost 的设置，以便访问该名称将被重定向到“子目录/公共' 文件夹，但是当我访问它时，我遇到了这个错误：

enter image description here

当我访问vue的任何子路由时它都可以正常连接，但是主路由会出现这个问题。

路由器/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,
        },
      ],
    },

  ],
});

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

【问题讨论】：

问题出在你的 laravel 部分。您应该将/ 重定向到/subdirectory，并将您的路线更改为Route::get('/subdirectory/{any}', 'FrontendController@app')->where('any', '^(?!api).*$');
关键是 laravel 在一个子文件夹中，并且 apache v-host 正在将所有转到 /subdirectory 的内容重定向到 /subdirectory/public，如果我将 laravel 路由设置为 /subdirectory/{any} 我将拥有访问我的网址为：/subdirectory/subdirectory/{any}
是的，您必须这样做，但是由于您使用 vue 来制作 SPA，这并不重要，因为您向用户显示了正确的 url，并且只是向您的 api url 添加了另一个子目录。

标签： laravel vue.js laravel-5

【解决方案1】：

除了在 vue-router 文件中使用 base:'your-sub-directory' 和 mode:history 之外，还需要配置 laravel mix 以使用 publicPath 将文件编译到正确的子目录

在您的 webpack.mix.js 文件中添加 publicPath 并重新编译您的代码：

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

【讨论】：