Неожиданный импорт токена в маршрутизатор vuejs с laravel mix и eslint

У меня есть проект laravel, который использует VueJS и Vue-Router для управления интерфейсом. Я только что установил eslint и настроил его с некоторыми предустановками по умолчанию, но как только я добавляю блок mix.webpackConfig в папку webpack.mix.js, внезапно возникают ошибки в функции ES2015 import (), которую я использую для асинхронной загрузки компоненты vue.

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig({
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  }
})

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css');

Как только я удалю блок mix.webpackConfig (), он заработает нормально. Я не понимаю, почему добавление туда eslint-loader внезапно сломало бы babel.

Вот конкретный файл, в котором я использую функцию import (). У кого-то была аналогичная проблема, но они обнаружили опечатку в имени файла, и я трижды проверил это.

import Vue from 'vue'
import Router from 'vue-router'
import App from './views/App.vue'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,

  routes: [
    {
      path: '/',
      name: 'home',
      meta: { layout: 'no-sidebar-no-container' },
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      meta: { layout: 'no-sidebar' },
      component: () => import('./views/Login.vue')
    },
    {
      path: '/admin',
      name: 'admin',
      meta: { layout: 'no-sidebar' },
      component: () => import('./views/Admin.vue')
    },
    {
      path: '/events',
      name: 'events',
      meta: { layout: 'no-sidebar' },
      component: () => import('./views/Events.vue')
    },
    {
      path: '/course/:courseId',
      name: 'course',
      component: () => import('./views/Course.vue')
    },
    {
      path: '/edit/course/:courseId',
      name: 'edit-course',
      meta: { layout: 'no-sidebar' },
      component: () => import('./views/Admin/EditCourse.vue')
    },
    {
      path: '/edit/course/newcourse',
      name: 'edit-newcourse',
      meta: { layout: 'no-sidebar' },
      component: () => import('./views/Admin/EditCourse.vue')
    },
    {
      path: '/edit/eventspage',
      name: 'edit-eventspage',
      meta: { layout: 'no-sidebar' },
      component: () => import('./views/Admin/EditEventsPage.vue')
    }
  ]
})

person Jared    schedule 30.11.2018    source источник
comment
вы создали .babelrc файл?   -  person Moumen Soliman    schedule 30.11.2018


Ответы (1)


Ну, я не понял этого, но я исправил это, используя вместо этого laravel-mix-eslint, как описано здесь:

https://laravel-mix.com/extensions/eslint

Теперь вместо этого блока у меня есть это:

require('laravel-mix-eslint');

mix.js('resources/js/app.js', 'public/js')
  .eslint()
  .sass('resources/sass/app.scss', 'public/css');
person Jared    schedule 30.11.2018