Uncaught ReferenceError: axios не определен в Vue.js

Я создаю приложение SPA со ссылкой на следующий учебник.

http://voerro.com/en/tutorials/r/building-spas-with-laravel-5-and-vuejs-2/1

До вчерашнего дня Верхняя страница отображалась без ошибок. Но сегодня я снова запустил виртуальную машину и получил к ней доступ, Возникает следующая ошибка JavaScript.

Uncaught ReferenceError: axios is not defined
at new Auth (app.js:53626)
at Module../resources/js/app.js (app.js:53554)
at __webpack_require__ (app.js:20)
at Object.0 (app.js:54214)
at __webpack_require__ (app.js:20)
at app.js:84
at app.js:87

Я попытался просмотреть журнал Git, но история не изменилась.

Вы знаете, как это решить??

class Auth {
constructor () {
  this.token = window.localStorage.getItem('token');
  let userData = window.localStorage.getItem('user');
  this.user = userData ? JSON.parse(userData) : null;

  if (this.token) {
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token; // <-this is the error point
  }
}

....

export default Auth;

app.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Auth from './auth.js'
 import Api from './api.js';

 window.api = new Api();
 window.auth = new Auth();

 Vue.use(VueRouter);

bootstrap.js

window.axios = require('axios');

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

Вы можете сэкономить время, пытаясь отладить это, просто удалив каталоги node_modules и public/js, а затем npm install и npm run dev.

Matt Wohler 20.01.2019 06:36

Спасибо за ответ. Я попробовал npm install и npm run dev, но это не сработало. Я также пробовал npm install axios и npm run dev, но это тоже не сработало.

yn1043 20.01.2019 09:01

Извините, я не мог помочь. Странно, но он просто перестает работать. Дважды проверьте, чтобы убедиться, что вы не внесли изменения в код случайно. Кроме того, вы всегда можете попробовать запустить vagrant reload --provision и повторить попытку компиляции ваших ресурсов. Кроме того, если вы хотите переустановить/перекомпилировать, делайте это изнутри окна виртуальной машины.

Matt Wohler 20.01.2019 09:12

Запускается ли bootstrap.js до загрузки auth.js? Если не axios не определен глобально до его использования

LLai 20.01.2019 09:28

@LLai спасибо за полезную информацию. Я этого не знал. но bootstrap.js был вызван до использования axios.

yn1043 20.01.2019 10:32

@MattWohler спасибо. Я не знаю почему, но я решил это с помощью vagrant reload --provision. В любом случае, спасибо!!

yn1043 20.01.2019 10:33
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
1
6
5 415
2

Ответы 2

Либо используйте window.axios, либо import axios from 'axios', либо vue.prototype.$axios = axios. Это проблема масштаба. Не полагайтесь на глобальные переменные.

Я понял, что проблема возникла из-за комментирования или удаления

require('./bootstrap'); /****in app.js ***/

Это если вы работаете с Vue в Laravel.

Примечание: это не твиттер Bootstrap для пользовательского интерфейса

я даже не подумал, что это не загрузчик твиттера, и просто прокомментировал это, ты спасаешь жизнь!

Amr SubZero 13.07.2021 18:05

Другие вопросы по теме