Получить неожиданный токен '<' при загрузке JS-файла в vue.js + laravel
Я пытаюсь изучить laravel 10 с помощью vue inertia, пересобрав свой старый проект, который я написал, используя vue и node.
Я использую библиотеку для записи звука, код такой:
recorder = new WebAudioRecorder(input, {
encoding: encodingType,
numChannels: 2,
onEncoderLoading: async function (recorder, encoding) {},
onEncoderLoaded: async function (recorder, encoding) {},
});
новый WebAudioRecorder будет загружаться из WebAudioRecorder.min.js. в WebAudioRecorder.min.js он создает нового Worker из файла WebAudioRecorderWav.min.js.
Код работает нормально в моем старом проекте, но когда я использую laravel, я замечаю, что всякий раз, когда я загружаю файл js, я продолжаю перенаправляться обратно в текущий файл и получаю ошибку: 1:1 Uncaught SyntaxError: Неожиданный токен '<' (в 1:1:1).
Заглядываю в сеть и вижу, что после загрузки файла WebAudioRecorder.min.js он всегда перенаправляется обратно на текущий файл. Из-за этого событие onComplete никогда не срабатывает и не возвращает большой двоичный объект, как ожидалось.
Ответы 1
После некоторых дополнительных исследований я нашел проблему и смог ее исправить.
На самом деле есть две проблемы:
Когда WebAudioRecorder.min.js пытается создать новый Worker из WebAudioRecorderWav.min.js, он не загрузил файл правильно, как вы можете видеть на этом снимке экрана сети; вот почему меня перенаправляют обратно на текущую страницу, когда она не может найти WebAudioRecorderWav.min.js.
Правильный номер порта содержимого URL http://localhost:5173/; но если указать только имя файла в new Worker('WebAudioRecorderWav.min.js'), я получаю:
http://localhost/public/sound/WebAudioRecorderWav.min.js
Затем я пытаюсь получить правильный URL-адрес, выполнив следующие действия:
const url = import.meta.url;
const parts = url.split('/');
if (parts.length == 5) {
parts.pop();
parts.pop();
}
else parts.pop();
Здесь я получаю правильный URL-адрес. Однако это привело к другой проблеме: веб-работник не может загрузить из другого локального файла JavaScript по соображениям безопасности, поэтому я получаю следующую ошибку:
Нам нужен URL для WebAudioRecorderWav.min.js. Я нашел обходной путь (Chrome не может загрузить веб-работника):
Шаг 1: Нам просто нужно скопировать весь код из
WebAudioRecorderWav.min.jsв функцию вWebAudioRecorder.min.js, хотя это противоречит цели записи кода в другой файл JavaScript.Шаг 2. Добавьте условие
(window!=self)для запуска функции. Я не уверен, как оно работает, но у меня оно сработало.Шаг 3. Мы можем загрузить функцию в наш новый рабочий объект, преобразовав ее в большой объект и затем создав для него URL-адрес.
function worker_function() { // all WebAudioRecorderWav.min.js code here } if (window!=self) worker_function(); new Worker(URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'})));