javascript - Laravel Mix 和 Turbolinks-6ren

javascript - Laravel Mix 和 Turbolinks

转载作者：行者123 更新时间：2023-12-01 15:45:40

26

4

我在设置 turbolinks 时遇到了一些问题。这是设置:Laravel Mix - 默认设置:bootstrap、jquery、..)。就在 bootstrap.js 文件之后，我包含了 turbolinks。一切正常，直到页面重新加载 - 我总是出错。我究竟做错了什么？
错误:

app.js:1282 Uncaught TypeError: $ is not a function
    at HTMLDocument.<anonymous> (app.js:1282)
    at Object.push../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (vendor.js:105933)
    at r.notifyApplicationAfterPageLoad (vendor.js:105934)
    at r.visitCompleted (vendor.js:105934)
    at r.complete (vendor.js:105933)
    at r.<anonymous> (vendor.js:105933)
    at vendor.js:105933

有错误的行:

document.addEventListener('turbolinks:load',function() {
    new SimpleBar(document.getElementsByClassName("js-simplebar")[0]);
    $(".sidebar-toggle").on("click", function() {
        //...
    });
});

编辑
这里是 js 包括(编译 - Laravel Mix)

<head>
<script defer src="/js/manifest.js" data-turbolinks-track="true"></script>
<scrip`enter code here`t defer src="/js/vendor.js" data-turbolinks-track="true"></script>
<script defer src="/js/app.js" data-turbolinks-track="true"></script>
</head>

这是我的 app.js:

require('./bootstrap');
let Turbolinks = require('turbolinks');
Turbolinks.start();

require("./dashboard");
require('./custom/INotifier').run();

require("./theme/bootstrap");
require("./theme/theme");

和 bootstrap.js(包括 jQuery、bootstrap js、axios、...)

try {

window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');

} catch (e) {}

window.axios = require('axios');

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

最佳答案

在您显示的错误中，写着 Uncaught TypeError: $ is not a function此错误主要发生在调用它的脚本之前未定义 jquery 时。
在 head 中添加 jquery的 html，在 turbolinks 之前通过下载 jquery 或通过 CDN 来编写脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

关于javascript - Laravel Mix 和 Turbolinks，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63111476/

26

4

0

Laravel mix 在 mix v4+ 中总是未定义
任何调用 npm run升级到 Mix v4.x 后导致 mix 未定义。我在每次运行时都会看到这样的错误: > npm run development > @ development /projec
laravel-mix - 升级到 Laravel MIX 6 后传入环境变量
升级到 Laravel-Mix 6 之前: Laravel-Mix 版本:5.0.9(支持 Webpack 4) NPM 版本:6.14.5 通过这个 laravel 混合版本，我能够通过运行 pac
Laravel 混合 : using `mix.js` or `mix.scripts`
在 Laravel 5.5 中，我使用 laravel-mix 来编译我的 Assets 。但是我不清楚:mix.js 之间有什么区别？和 mix.scripts为什么我要使用一个而不是另一个？最
javascript - mix.scripts 不工作(webpack.mix.js)
我有以下 webpack.mix.js: const { mix } = require('laravel-mix'); mix.scripts([ 'resources/assets/js/
elixir - `mix ecto.rollback` 和 `mix ecto.migrate` 命令的调试级别日志记录
目前，我正在寻找在运行 mix 任务时添加 SQL 语句日志记录的方法。例如，mix ecto.rollback 和 mix ecto.migrate 等命令输出信息: ... 13:45:53.01
elixir - 为 Mix 任务启动 Ecto(Mix.EctoSQL.ensure_started 不再工作)
我知道这个问题已经被问过了，答案总是单独的答案。但是我看到 Mix.EctoSQL.ensure_started 提到了很多，这似乎是公认的方法。然而，在 ecto_sql 3.1.2 中，此功能
elixir - mix.compile 返回错误 (Mix) 无法编译 "src/gettext_po_parser.yrl"因为找不到应用程序 "parsetools"
mix compile ==> gettext could not compile dependency :gettext, "mix compile" failed. You can recompi
javascript - 使用 webpack.mix 编译 js 文件时，mix.scripts 在 laravel 5.5 上不起作用
我正在使用 Laravel 5.5 ，在 webpack.mix 文件中，mix.styles 函数完美运行，我完美地编译了我的 css 文件，但是mix.scripts 不编译我在文档中找到的 js
mix - 如何设置默认的Elixir混合任务
如果我有一个mix.exs文件，例如: defmodule Mix.Tasks.My_task do use Mix.Task @shortdoc "Perform my task" de
Laravel Mix 不组合样式
这是我第一次使用 Laravel Mix、NodeJS 和 NPM。我试图遵循 Laravel 的文档并相信我做得对，但谁知道呢。我正在尝试将多个 CSS 文件合并为一个。 webpack.mix.
mixed-models - 每个物种使用多个条目的系统发育模型
我对系统发育回归模型比较陌生。过去，当我的树中每个物种只有 1 个条目时，我使用了 PGLS。现在我有一个包含总共 9 个物种的数千条记录的数据集，我想运行一个系统发育模型。我阅读了最常见软件包(例如
Laravel Mix - 是否需要链接以确保执行顺序？
TLDR；您是否必须链接 Laravel Mix 方法来维护执行顺序？是否有任何异步方法会阻止使用以下非链接模式，mix.scripts(); mix.js(); mix.sass(); ? 我运行
CSS @supports : mixing "not" with "and" or "or"
我想为支持“显示:网格”但不支持 IE/MS Edge 的浏览器提供特定部分的 CSS。你如何混合正面和负面的@support 查询？你能写“and not”还是有类似的符号？不幸的是，以下方法不起
Laravel mix 生成相对路径
在生产中，加载我使用的 Assets ，例如: 并期望在编译时看到: 但是我只是看到相对路径: webpack.mix.js: mix .js('resources/assets/js/ap
assembly - MIX 中的除法是如何进行的？
有人可以向我解释一下 MIX 中的除法(来自 Knuth 的 TAOCP)是如何在字节到字节的基础上工作的吗？ rA = |-| . . . .0| rX = |+|1235|0|3|1| 内存位置
Laravel-Mix 字体路径问题
我正在尝试使用我从 themeforest 与 Laravel 购买的主题我已经使用 mix.copy 将我的字体从 node_modules 移动到我的 public 目录，这工作正常。/ 但是，
elixir - mix 在代理后面不起作用
至少就在两周前，我一直在代理后面使用mix。但是我昨天发现 mix 无法在代理后面工作。混合版本是1.1.1。mix local.hex 运行。但是mix deps.get 出现错误。 $ mix d
c++ - 文件系统路径字符串方法返回 mixed\and/
我有一个 C++ 程序，我在其中使用递归迭代器遍历我作为参数提供给程序的文件夹。问题是，当我在路径上调用 .string 时，我在路径中混合了\和/。使用 .generic_string 修复了这个
javascript - Laravel Mix，如何在混合时传递变量？
所以我有一个 JS 文件，我想使用 Laravel mix 进行混合、复制和压缩；我的 webpack.mix.js 文件如下所示: const mix = require('laravel-mix'
elixir - 如何在伞形项目的根目录下创建 Mix 任务？
我有一个 Elixir 伞形项目。这个项目中的每个应用程序都可以使用 mix escript.build 编译成可执行文件。我正在尝试从伞项目的根目录运行此命令并收到以下错误 ** (Runtime

首页

博学

6Ren·AI

商城

javascript - Laravel Mix 和 Turbolinks