使用 laravel mix 和 eslint 在 vuejs 路由器中导入意外的令牌答案

【问题标题】：Unexpected token import in vuejs router with laravel mix and eslint使用 laravel mix 和 eslint 在 vuejs 路由器中导入意外的令牌
【发布时间】：2019-05-02 18:46:09
【问题描述】：

我有一个使用 VueJS 和 Vue-Router 来管理前端的 laravel 项目。我刚刚安装了 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')
    }
  ]
})

【问题讨论】：

您是否创建了.babelrc 文件？

标签： javascript laravel vue.js eslint laravel-mix

【解决方案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');

【讨论】：