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需要'syntax-dynamic-import'，因此我创建了一个.bablerc文件，内容如下：

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

由于圣经配置文件无法解决问题，因此我也尝试了具有以下内容的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中使用以下命令。

"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混合创建两个css文件时，其中包含清单js文件内容。这绝对是一个错误。社区中提到了来自Webpack的错误，并将在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",
}

希望这可以解决问题

Laravel 5.6-带有laravel-mix和webpack的异步/延迟加载vue组件

2 个答案: