首页 > 解决方案 > Laravel mix - 具有两个级别的路线上出现 404 错误

问题描述

我当前的配置有一个小问题,后端使用 Laravel,前端使用 Vue,而我的应用程序是使用 Laravel mix (6.0) 构建的。

我正在使用以下简单的混合配置:

mix.js("resources/js/app.js", "public/js/app.js")
    .vue()
    .version()
    .extract();

运行时一切正常npm run watch,当我启动生产构建时,我的公共文件夹中按预期获得了三个文件(manifest.js、app.js 和 vendor.js)。我通过以下方式将这三个文件包含在我的 app.blade.php 文件中:

<script src="{{ asset(mix('js/manifest.js')) }}" defer></script>
<script src="{{ asset(mix('js/vendor.js')) }}" defer></script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>

出来的 mix-manifest.json 看起来是这样的:

{
    "/js/app.js": "/js/app.js?id=55e00bb7adfe7cc8d33c",
    "/js/vendor.js": "/js/vendor.js?id=3cc2a9d83cabdff07b38",
    "/js/manifest.js": "/js/manifest.js?id=7d6950016e73d672d079",
}

大多数路线在这样的配置下工作得很好。

但是,我面临的问题是在尝试访问具有至少两个级别的特定路由时出现的通用 404 错误,例如 <my_website>/read/<post_id>。在这种情况下,浏览器会尝试解析像 <my_website>/read/js/app/1.js 这样显然不存在的内容,因为它应该搜索 <my_website>/js/app/1.js。

我在这里遗漏了一些明显的东西吗?有没有办法在清单文件中包含完整路径以避免这种情况,并确保浏览器解析正确的文件?或任何其他工作来完成这项工作?谢谢!

标签: laravellaravel-mix

解决方案


您可以在浏览器中强制使用基本 URL。这会为您重写 URL。

使用<base>标签

在此处查看基本标记的文档:
https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

例子:

<base href="https://www.example.com/">

推荐阅读