时间戳

首页 > 解决方案 > 带有laravel mix和eslint的vuejs路由器中的意外令牌导入

javascript - 带有laravel mix和eslint的vuejs路由器中的意外令牌导入

问题描述

我有一个使用 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')
    }
  ]
})

标签： javascriptlaravelvue.jseslintlaravel-mix

解决方案

好吧，我没弄明白，但我改用 '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');

推荐阅读