laravel inertia.js 與 vue.js3 模板 js 文件不工作

Question

請幫幫我

我是 inertia.js 的新手

CSS文件工作但JS文件不工作 iam 使用 inertia.js laravel 9 使用 vue.js-3

使用 admin html 模板 im bulting admin dashboard 但我面臨 js 文件的問題它不工作但是當我使用普通的 laravel 9 和 blade.php 概念它完美地工作。

所以我從 2 天開始嘗試使用不同的付費管理模板，但它不起作用幫助我修復它

我嘗試了以下方法但沒有用

我的代碼

APP.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">
   <title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- //css -->
    <link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
    <link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
     
<!-- //js -->
    <script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
    <script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
    <script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

我也試過這個方法

<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">

<script src="assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="assets/libs/jsvectormap/maps/world-merc.js"></script>
<script src="assets/libs/jsvectormap/maps/us-merc-en.js"></script>

方法二

<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">

<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>

Answer 1

我對此有解決方案，因此與其在 app.blade.php 文件中添加 js 和 css，不如移動資產文件夾資源文件夾。

在app.css中導入所有 css 文件，如下所示

//resources/css/app.css
@import '../assets/css/dashlite.css?ver=3.1.1';
@import '../assets/css/theme.css?ver=3.1.1';

同樣導入app.js中的所有 js 文件，如下所示

//resources/js/app.js
import("../assets/libs/jsvectormap/js/jsvectormap.min.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");

現在在app.blade.php添加 css 和 vite 指令中的 js

 @vite(['resources/js/app.js', 'resources/css/app.css', 
 "resources/js/Pages/{$page['component']}.vue"])

願這對你有幫助。 快樂編碼

laravel inertia.js 與 vue.js3 模板 js 文件不工作

問題描述

1 個解決方案

解決方案1
0 2023-01-12 12:20:12

laravel inertia.js 與 vue.js3 模板 js 文件不工作

問題描述

1 個解決方案

解決方案1 0 2023-01-12 12:20:12

解決方案1
0 2023-01-12 12:20:12