Question

我在获取数据时遇到问题。这是错误消息在控制台中弹出...

未捕获的错误：模块构建失败（来自 ./node_modules/babel-loader/lib/index.js)：SyntaxError： /var/www/html/laravel/resources/js/components/Content.vue：const是一个保留字（8：4）

我在用法上有问题吗？

<template>

</template>

<script>
  export default {

    const axios = require('axios');

    axios.get('/ajax')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
    });

}
</script>

也在App.js中

require('./bootstrap');

window.Vue = require('vue');


// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('content-wrap', require('./components/Content.vue').default);


const app = new Vue({
    el: '#app'
});

Answer 1

好吧，首先，您的语法错误export default {}导出对象，但是您的语法不正确。

对象语法由key: value隔开，,

例如：

import axios from 'axios';

export default {
  created(){
    axios.get('/ajax')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
    });
  }
}

P.S。我认为了解es6模块将对您有所帮助，因此，这里是一个链接：https://www.sitepoint.com/understanding-es6-modules/

Answer 2

您正在使用Laravel，因此axios已包含在内（请查看require('/bootstrap')文件）。在您的组件中，您的export default{}是错误的。它是一个对象，因此将其视为一个对象：

export default {
  created(){
    axios.get('/ajax')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
    });
  }
}

Answer 3

@Barbie尝试添加.babelrc配置文件

Axios在Laravel / Vue中获取数据

3 个答案: