Laravel 5.6 - 使用 laravel-mix 和 webpack 异步/延迟加载 vue 组件

Question

Laravel 5.6.21
NPM 6.1.0
Node 10.5.0
Webpack 3.12.0

我的问题是如何使用此处描述的方法正确配置 laravel-mix、webpack 和 babel 以成功延迟加载 vue 组件:Lazying Loading Routes

更具体地说，使用 stage-2 (es2018 ?) 语法如下:

const Foo = () => import('./Foo.vue')

当尝试使用 laravel-mix 编译时，所有类似于上述语法的语句都会产生错误(示例):

 Syntax Error: Unexpected token (1:24)

 1 | const Dashboard = () => import("Pages/Account/Dashboard.vue");

   |                         ^

我相信 laravel-mix 使用 Babel 来转译并读取 Babel 需要 'syntax-dynamic-import' 所以我创建了一个包含以下内容的 .bablerc 文件:

{
  "plugins": [
    "syntax-dynamic-import"
  ]
}

由于bable配置文件没有解决问题，我也尝试了一个eslint配置文件，内容如下:

module.exports = {
  plugins: ["vue"], // enable vue plugin
  extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
  parserOptions: {
    "parser": "babel-eslint",
    "ecmaVersion": 7,  //also tried 8
    "sourceType": "module",
    "ecmaFeatures": {
      "globalReturn": false,
      "impliedStrict": false,
      "jsx": false,
      "experimentalObjectRestSpread": false,
      "allowImportExportEverywhere": false
    }
  }
}; 

最后，package.json 中的依赖副本是:

  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.24",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-imports": "^1.5.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-vue-app": "^2.0.0",
    "cross-env": "^5.2.0",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-html": "^4.0.1",
    "eslint-plugin-vue": "^4.5.0",
    "expect": "^22.0.3",
    "jsdom": "^11.5.1",
    "jsdom-global": "^3.0.2",
    "laravel-mix": "^2.1.14",
    "less": "^3.5.3",
    "less-loader": "^4.1.0",
    "mocha": "^4.0.1",
    "mocha-webpack": "^1.0.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-loader": "^13.7.2",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.13",
    "vue-test-utils": "^1.0.0-beta.8",
    "webpack": "^3.12.0",
    "webpack-auto-inject-version": "^1.1.0"
  },

任何有关解决此问题的帮助将不胜感激。

Answer 1

我一直在 .eslintrc.json 中使用 with following。

"extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
],
"plugins": [
    "vue"
],
"parser": "vue-eslint-parser",
"parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 8,
    "ecmaFeatures": {
        "jsx": true
    },
    "sourceType": "module"
},

还要检查动态导入函数的路径 const Dashboard = () => import("Pages/Account/Dashboard.vue");。我认为它应该是一个类似 const Dashboard = () => import("./Pages/Account/Dashboard.vue");

的相对路径