授权页面在 laravel 中未获得 css

Question

我是 laravel 的初学者。我已经创建了项目。我有运行以下命令。

composer require laravel/ui --dev
npm install
npm run dev
php artisan ui vue
php artisan ui vue --auth

执行此命令后，我的欢迎页面上出现 Login 和 Register 菜单。现在我的 laravel 欢迎页面正确加载。但是当我点击登录时，它显示普通 html。我搜索并检查了 app.blade.php css 和 js 的链接。看起来不错。 layouts/app.blade.php 有以下链接

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

应该是哪里出了问题？为什么登录和注册没有得到 css，而欢迎页面得到 css？请指导。

Answer 1

第 1 步：

下载nodejs
在你的电脑上安装 nodejs

第 2 步：

然后打开你的项目根目录并命令
composer require laravel/ui
php artisan ui vue --auth
npm install
npm run dev

执行 npm 命令后，它将在您的项目中生成 node_module 文件夹，删除该文件夹。

npm 命令仅适用于 .css 和 .js 文件。

如需帮助，请观看此视频：https://www.youtube.com/watch?v=hOYW3jqh19I&t=9s

Answer 2

您可以从这里下载这两个文件：

然后创建css和js文件夹到public文件夹刚放：

CSS 文件：app.css 到 project_folder/public/css/

JS 文件：app.js 到 project_folder/public/js/

它对我有用。我认为它也会为你工作。谢谢

Answer 3

有时缓存可能是这种情况下的问题，您可以运行

php artisan cache:clear 和可选的 php artisan view:clear.

Answer 4

运行命令：

npm uninstall popper.js && npm i @popperjs/core

删除已弃用的软件包并安装新的 Popper v2。

Answer 5

对我来说，这只是 npm run dev 命令。在我的 ubuntu 19.10 中，它必须运行与 sudo

Answer 6

解决这个问题的非常简单的方法是使用以下 cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

而不是

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

我提供的链接是 bootstrap cdn 并检查 .它会起作用并使用

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

而不是

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

Answer 7

您需要清除浏览器的缓存。确认进入隐身模式并再次尝试 URL。如果它有效，那就是问题所在。

Answer 8

我尝试按照 laravel 8 中的命令进行操作，效果很好

composer require laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production

Answer 9

我试过laravel 8中的命令，效果不错，你也可以试试

composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production

Answer 10

运行

npm install
npm run dev
npm run watch 继续编译

Answer 11

我在 laravel 版本 7 中实现 composer require laravel/ui 时遇到了同样的问题，但我按照以下步骤修复了它。

第一个：

下载nodejs
在你的电脑上安装 nodejs

第二个：运行这个命令

composer require laravel/ui

安装 laravel/ui 包后，您可以使用 ui Artisan 命令安装前端脚手架：

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

要在项目中生成 node_module 文件夹运行以下命令

npm install

使用 npm install 安装依赖项后，您可以使用 Laravel Mix 将 SASS 文件编译为纯 CSS。 npm 运行 dev 命令将处理 webpack.mix.js 文件中的指令。通常，您编译的 CSS 将放在 public/css 目录中：

npm run dev

有时您可能需要运行此命令 npm audit fix 或 npm audit fix --force 来修复某些包，如果它们需要 ui 红色。

也许在某些时候通过运行执行此命令 npm run dev 或 npm run watch 它会向您显示如下所示的错误。

@ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

jus 运行 npm run watch 再次启动 Mix █████████████████████████ emitting (95%) 成功后 build 也会成功。

Answer 12

Public 你的 CSS。我的意思是将 CSS 文件保存在项目的 public 目录中。您的 css 文件应位于：yourprojectname\public\css\app.css

Answer 13

您需要运行以下命令 laravel 7.x。

解决方案

首先进入你的项目根文件夹C:\Whatever\Your_project_name>

      composer require laravel/ui

根据您的前端框架尝试以下任一命令。

      php artisan ui vue --auth
      php artisan ui bootstrap --auth
      php artisan ui react --auth

最后别忘了运行

      npm install

如果您的用户界面无法正常工作，请尝试以下命令。

      npm run production

如果以上命令对您不起作用。

原因：错误是因为public/css/app.css中没有css代码，执行完所有命令但该文件夹中仍然没有代码。

从这里 https://github.com/sabaoonbedar/Css-File-For-Laravel-Developers/tree/master 获取文件或代码并将其放入您的项目 public/css/app.css 或者如果不创建类似的文件夹'不存在。

Answer 14

在我看来，您的 node.js 版本已过时。只需更新 Node.js 并从头开始安装 laravel ui 等等。

composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev

希望它能解决问题。

Answer 15

您必须使用 npm run watch 命令编译包。之后你可以运行 npm run dev

Answer 16

这个命令在我的机器命令中工作。

npm run dev

Answer 17

   composer require laravel/ui

   php artisan ui vue
   npm install
   npm run dev

   php artisan ui vue --auth
   npm install
   npm run dev

您必须为两个脚手架调用 npm install 和 npm 运行 dev

Answer 18

我遇到了同样的问题 CSS & js 使用 CDN 链接但不使用默认 CSS。所以 public/css/app.css 和 js 文件中没有 CSS 代码的文件，所以我将代码和文件从另一个 [=17] 复制并粘贴到 public 目录中=] 目录，现在可以正常工作了。

Answer 19

安装好所有东西后试试这个

npm update vue-loader

Answer 20

运行您的 Laravel 项目中的以下命令。

composer require laravel/ui 
php artisan ui bootstrap --auth
npm install
npm run dev

Answer 21

就我而言，我刚刚下载了最新版本的nodejs并安装了它。之后，只需输入 npm 运行 dev。并刷新您的浏览器，一切顺利！干杯！！

授权页面在 laravel 中未获得 css

auth pages not getting css in laravel

php

laravel

laravel-6

laravel-ui

您需要运行以下命令 laravel 7.x。

授权页面在 laravel 中未获得 css

auth pages not getting css in laravel

php

laravel

laravel-6

laravel-ui

您需要 运行 以下命令 laravel 7.x。

您需要运行以下命令 laravel 7.x。