laravel JetStream CSS和JS无法工作，并显示@vite(['resources/css/app.css'，'resources/js/app.js'])

zzwlnbp8 于 2022-12-01 发布在其他

关注(0)|答案(8)|浏览(453)

我在laravel 8上安装了livewire、laravel mix和jetstream。但是Jetsream的css和js不工作，并且在标题中显示一条消息“@vite（['resources/css/app. css'，'resources/js/app. js']）'

应用程序.blade.php

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        @livewireStyles

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <x-jet-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>

        @stack('modals')

        @livewireScripts
    </body>
</html>

laravel

来源：https://stackoverflow.com/questions/73180945/jetstream-css-and-js-not-working-and-showing-viteresources-css-app-css-re

8条答案

按热度按时间

p5cysglq1#

转到（app.blade.php，guest.blade.php）并删除@vite，如下所示

@vite(['resources/css/app.css', 'resources/js/app.js']) => Remove this and add following 

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

赞(0）回复(0）举报 2022-12-01

yacmzcpb2#

用以下代码替换Welcome.blade.php、guest.blade.php和test.blade.php，这是我的工作

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

          <!-- Styles -->
          <link rel="stylesheet" href="{{ asset('css/app.css') }}">
          @livewireStyles
      
          <!-- Scripts -->
          <script src="{{ asset('js/app.js') }}" defer></script>
      
    </head>
    <body>
        <div class="font-sans text-gray-900 antialiased">
            {{ $slot }}
        </div>
        @livewireScripts
    </body>
</html>

赞(0）回复(0）举报 2022-12-01

y3bcpkx13#

只需在里面粘贴两行代码（app.blade.php，guest.blade.php）来代替@vite，如下所示：

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <script src="{{ asset('js/app.js') }}" defer></script>
    
    {{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}

并将此代码粘贴到文件夹public/mix-manifest.json中

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

赞(0）回复(0）举报 2022-12-01

yruzcnhs4#

我遇到了同样的问题，我通过切换到PHP8解决了它。切换后，您必须删除您的项目并重新创建它。

赞(0）回复(0）举报 2022-12-01

n53p2ov05#

这可能是缓存问题：运行以下命令：

sail restart

赞(0）回复(0）举报 2022-12-01

x7rlezfr6#

Laravel 8不支持vite，所以这就是为什么你把你的指令看作是一个字符串。
此外，对我来说，我必须强制资产通过HTTPS模式加载。在AppServiceProvider.php boot（）中根据这个https://stackoverflow.com/a/51819095/8369356。

赞(0）回复(0）举报 2022-12-01

envsm3lx7#

只要更新你的php版本到8，它将工作

赞(0）回复(0）举报 2022-12-01

t3psigkw8#

删除@vite（['resources/css/app.css'，'resources/js/app.js']）并将其替换为

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

"工作起来很有魅力"

赞(0）回复(0）举报 2022-12-01

我来回答

laravel JetStream CSS和JS无法工作，并显示@vite(['resources/css/app.css'，'resources/js/app.js'])

8条答案

相关问题

热门标签

最新问答