Question

我正在参考以下教程创建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';

Answer 1

使用window.axios或import axios from 'axios'或vue.prototype.$axios = axios。这是一个范围问题。不要依赖全局变量。

Answer 2

我意识到问题是由于注释或删除引起的

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

那是如果您正在Laravel中使用Vue。

注意：这不是用于UI的twitter Bootstrap

未捕获的ReferenceError：在Vue.js中未定义axios

2 个答案: