Laravel 5.6 - Async / Lazy load vue components with laravel-mix和webpack

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

更具体地说，使用阶段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需要‘语法-动态-导入’，所以我创建了一个包含以下内容的.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中一直在使用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");

Answer 2

问题出在Vue中的scss splitting和使用mix.scss()两者中。Laravel mix当两者都有时，创建一个包含清单js文件内容的css文件。这绝对是个窃听器。社区提到了Webpack的一个bug，并将在webpack 5中解决。但是如果你只在Vue中使用代码拆分，并像这样(不在作用域内)将默认的app.scss文件导入到主Vue组件中，那么每个其他组件都会正确地获得样式

// resources/js/components/app.vue
<template>
 <!-- Main Vue Component  -->
</template>

<script>
// Main Script
</script>

<style lang="scss">
  @import '~@/sass/app.scss';
</style>

并且webpack.mix.js文件将没有mix.scss函数来仅运行单个app.js文件。这是我的档案。

// webpack.mix.js
const mix = require('laravel-mix')
mix.babelConfig({
  plugins: ['@babel/plugin-syntax-dynamic-import'] // important to install -D
})

mix.config.webpackConfig.output = {
  chunkFilename: 'js/[name].bundle.js',
  publicPath: '/'
}

mix
  .js('resources/js/app.js', 'public/js')
  .extract(['vue'])
  .webpackConfig({
    resolve: {
      alias: {
        '@': path.resolve('resources/') // just to use relative path properly
      }
    }
  })

这是package.json文件(仅包含所需的开发依赖项)

{
       "@babel/core": "^7.8.7",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/preset-env": "^7.8.7",
        "laravel-mix": "^4.1.4",
}

希望这能解决这个问题