CSS 不会在 XAMPP 上的 Laravel 8 + Jetstream 中加载

Posted 2023-02-25

【中文标题】CSS 不会在 XAMPP 上的 Laravel 8 + Jetstream 中加载

【英文标题】：CSS does not load in Laravel 8 + Jetstream on XAMPP

【发布时间】：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 install 和npm run dev。我有一个类似的问题并通过这两个命令解决了。

@brombeer 非常感谢！设置一个虚拟主机解决了这个问题。

【参考方案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