如何使用 Angular 7 路由 Laravel 应用程序

Question

我在本地使用 LAMP 创建了一个服务器，我想将 Laravel 用于后端，将 Angular 7 用于前端。

我把这个放到我的web.php 文件中：

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
        View::addExtension('html', 'php');
        return view('index');
});

我将所有 Angular 文件都放在了 /public/ 文件夹中，除了 index.html 位于 /resources/views 中。

原因是：如果你去 site.com/ Angular 将会被加载。例如，如果您单击链接并转到 site.com/page，则 Angular 将加载此页面。直到这里一切都按预期工作。

但是，如果您只是在浏览器的地址栏中键入 site.com/page，您实际上是在向 site.com/page 发送请求。由于它不存在，Web 服务器将返回 404 并且 Angular 应用程序将无法工作。 Angular 甚至没有机会被加载。

我知道这是因为我在de web.php文件中没有到/page的路由，但我的问题是如何解决这个路由问题？

谢谢。

Answer 1

使用fallback route。

使用Route::fallback 方法，您可以定义一个在没有其他路由匹配传入请求时将执行的路由。

Route::fallback(function () {
    //
});

确保将其放在路由文件的末尾，以便任何现有路由（例如您的 API 端点）正常匹配。

添加回退路由之前的另一个常见解决方案是使用regular expression matching 创建通配符路由：

Route::get('{any}', 'WildcardController@handle')->where('any', '.*');

Answer 2

当然，我将引导您完成设置 Laravel 和 Angular 项目的步骤，
首先，您需要使用 ng build 构建您的 Angular 应用程序并传递任何标志（如 --prod 以在生产模式下创建或仅使用 --ng build 不要忘记更改 Angular 创建最终文件的文件夹，您可以做到）去 angular.json 并修改 outputPath": "../server/public/client/"，像这样。 第二种：你需要去 Angular 最近创建的 public 文件夹，将 index.html 文件复制或移动到 laravel 的视图文件夹并粘贴它。 第三：你需要修改 angular 的脚本，指向 laravel 的 public 文件夹中的 angular 客户端文件夹，就是这样。

喜欢这个

enter image description here 在这种情况下，我的 Angular 文件夹是客户端 那里呀咕 您也可以通过修改 ng -build 命令或使用 Gulp、Grunt 和 Webpack 等自动化构建工具来执行此操作。 希望能帮到你