主页 / coding / 问题 / 79159826
Accepted
Omega
Asked: 2024-11-05 23:55:37 +0800 CST

如何将 Axios 与 Laravel 10 和 Vite 结合使用？

  • 772

我想在 Laravel 10 中使用 Axios 和 Vite 进行 Ajax 调用（我不使用 VueJs）。我收到错误“axios 未定义”。

我的观点：

<x-app-layout>
   

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
                hello world
            </div>
            
        </div>
    </div>

    <script>
            axios.get("{{route('scann','xxx')}}"
            ).then(function(rep){
                console.log(rep)
            })
        
    </script>
</x-app-layout>

在布局中，我在关闭标题之前包含了 css 和 js： @vite(['resources/css/app.css', 'resources/js/app.js'])

应用程序.js：

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

bootstrap.js：

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
laravel

2 个回答

  1. Best Answer

    很可能app.js直到视图中的脚本标记之后才会加载（type="module"默认情况下，Vite 脚本是这样的，因此加载被推迟）。尝试等到 DOM 加载完毕：

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        axios.get('/some-endpoint')
            .then(response => console.log(response))
            .catch(error => console.error(error));
    });
</script>
    • 0

  2. 定义全局变量和内联脚本不是好的做法，但 Blade 和 alpine.js 似乎都鼓励这样做。

    如果您的应用程序不是太大，也许您可​​以将所有内容都放入 app.js 中（放入、从中导入、间接从中导入，无论什么，只要它在构建系统的输出 app.js 文件中）。

    • 0

相关问题