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