为什么我的布局在welcome.blade 中不能正常工作答案

【问题标题】：Why my layout doesn't work properly in welcome.blade为什么我的布局在welcome.blade 中不能正常工作
【发布时间】：2022-07-08 21:38:51
【问题描述】：

我正在做一个 laravel 项目，我为welcome.blade 准备了一个布局，但是 css 和 html 不能正常工作。不知何故，项目无法读取它们。

我确保我的路径是正确的即使我在公共场合更改了文件夹和路径，但它不起作用

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="MealOrder">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <meta name="author" content="HiBootstrap">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Fafo - قالب رستوران و فست فود</title>
    <link rel="icon" src="/assets/images/tab.png" type="image/png" sizes="16x16">

    <link rel="stylesheet" src="/assets/css/bootstrap-reboot.min.css" type="text/css" media="all" />
    <link rel="stylesheet" src="/assets/css/bootstrap.rtl.min.css" type="text/css" media="all" />

    <link rel="stylesheet" src="/assets/css/animate.min.css" type="text/css" media="all" />

    <link rel="stylesheet" src="/assets/css/owl.carousel.min.css" type="text/css" media="all" />
    <link rel="stylesheet" src="/assets/css/owl.theme.default.min.css" type="text/css" media="all" />


    <link rel="stylesheet" src="/assets/css/jquery-ui.css" type="text/css" media="all" />

   
    <link rel="stylesheet" src="/assets/css/responsive.css" type="text/css" media="all" />


    @livewireStyles
</head>
<body>
  .
  .
  .
  .
  <script src="/assets/js/jquery-3.5.1.min.js"></script>
  <script src="/assets/js/bootstrap.bundle.min.js"></script>
  <script src="/assets/js/jquery-ui.js"></script>
  @livewireScripts   
</body> 
</html>

【问题讨论】：

可能你忘了 run: npm run dev 在你的终端。
为什么选择 npm ??我没有使用 webpack/laravel-mix @MartinAmu
不管@Adnane Kadri 说你应该编译你的资产。
检查您的控制台，它可能会告诉您找不到这些文件。那么问题来了，你把它们放在你的 Laravel 项目的什么地方了？

标签： html css laravel laravel-livewire

【解决方案1】：

我假设你使用 Laravel 9，因为 Laravel 现在使用 vite 而不是我们过去看到的 webpack/laravel-mix，而且 vite 在布局页面中注入样式和脚本的方式与以前不同。

您需要将以下刀片指令添加到您的布局文件中：

@vite(['resources/css/app.css', 'resources/js/app.js'])

然后重新运行 npm run build 或 npm run dev 以重新捆绑您的资产。

更多关于Bundling Assets (Vite)

【讨论】：

不，我使用 laravel 8，我不使用 webpack/laravel-mix .. 我以前的项目中没有这个错误

【解决方案2】：

最好将所有 src 更改为 assets() 例如：而不是

写

<link rel="stylesheet" src="{{asset('assets/css/animate.min.css')}}" type="text/css" media="all" />

脚本也一样

【讨论】：