【问题标题】:CSS does not load in Laravel 8 + Jetstream on XAMPPCSS 不会在 XAMPP 上的 Laravel 8 + Jetstream 中加载
【发布时间】:2021-03-20 15:00:27
【问题描述】:

我正在学习 Laravel 并使用 Laravel 8 和 Jetstream。在 XAMPP 上测试应用程序时,css 不会在登录/注册页面上加载。 css 链接指向 localhost/app/css 位置。如果我使用php artisan serve 命令,它工作正常,但不适用于 XAMPP。如何更正 css 指针,使其既适用于 php artisan serve 命令也适用于 XAMPP?

【问题讨论】:

  • 你把它们放在 /public/css 中了吗?
  • @Abilogos 据我了解,这些资产在运行 npm run dev 后会自动发布到公共目录。此外,如果我使用 php artisan serve 命令执行 css,则 css 会正确加载。问题只存在于 XAMPP,因为链接指向 localhost/css/app.css,而对于 XAMPP,它应该指向 localhost/myapp/public/css/app.css。
  • "它应该指向 localhost/myapp/public/css/app.css" public 文件夹不应该出现在 URL 中,它应该是 DocumentRoot .最好在 Apache 上设置一个虚拟主机,例如 project1.local 并将其指向您的项目公共文件夹。确保.env 中的APP_URL 设置正确
  • 试试npm installnpm run dev。我有一个类似的问题并通过这两个命令解决了。
  • @brombeer 非常感谢!设置一个虚拟主机解决了这个问题。

标签: laravel xampp jetstream


【解决方案1】:

在 public\mix-manifest.json 中,更改:

"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"

"/js/app.js": "js/app.js",
"/css/app.css": "css/app.css"

这种方法对我有用,而且它适用于 XAMPP 和 artisan serve。

【讨论】:

    【解决方案2】:

    resources\views\layouts\app.blade.php 中,更改:

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    

    收件人:

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    

    这将在 wamp 或 xampp 中工作。

    【讨论】:

      【解决方案3】:

      如果你更改了 public\mix-manifest.json 文件

      "/js/app.js": "/js/app.js",
      "/css/app.css": "/css/app.css"
      

      "/js/app.js": "js/app.js",
      "/css/app.css": "css/app.css"
      

      它不适用于文件:/user/profile,为此你需要 ../

      所以你必须做第二个选项,但不要忘记更改 .js 文件! 所以在:resources\views\layouts\app.blade.php chage

      <link rel="stylesheet" href="{{ mix('css/app.css') }}">
      <script src="{{ mix('js/app.js') }}" defer></script>
      

      <link rel="stylesheet" href="{{ asset('css/app.css') }}">
      <script src="{{ asset('js/app.js') }}" defer></script>
      

      并且不要忘记在文件中做同样的事情:resources\views\layouts\guest.blade.php chage

      【讨论】:

        猜你喜欢
        • 2021-01-01
        • 2018-05-27
        • 2021-10-01
        • 2021-08-13
        • 2021-12-21
        • 2021-01-25
        • 2021-04-07
        • 2021-06-15
        • 2021-04-08
        相关资源
        最近更新 更多