在带有 laravel mix 的 vue 路由器中使用动态导入答案

【问题标题】：Use dynamic import in vue router with laravel mix在带有 laravel mix 的 vue 路由器中使用动态导入
【发布时间】：2019-04-04 09:53:12
【问题描述】：

我将 laravel 5.7 与 Vue 2.5 和 VueRouter 3.0 一起使用。

我想使用动态模块 (see here)。

这是我的.babelrc：

{
    "presets": [
        ["env", {
            "modules": false,
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }],
        "stage-2"
    ],
    "plugins": ["transform-vue-jsx", "transform-runtime","syntax-dynamic-import","dynamic-import-node"],
    "env": {
        "test": {
            "presets": ["env", "stage-2","es2015"],
            "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "syntax-dynamic-import"]
        }
    }
}

还有我的webpack.mix.js：

const mix = require('laravel-mix');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.styl$/,
                loader: ['style-loader', 'css-loader', 'stylus-loader'],
            }
        ],
    }
});

mix.webpackConfig({
    resolve: {
        alias: {
            "@": path.resolve(
                __dirname,
                "resources/js"
            )
        }
    }
});

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

还有我的路线，动态导入：

export default [
  {
    path: '/404',
    meta: {
      public: true,
    },
    name: 'NotFound',
    component: () => import(
      /* webpackChunkName: "routes" */
      /* webpackMode: "lazy-once" */
      `@/pages/NotFound.vue`
    )
  },
]

但是当我在我的应用程序中访问时，找不到我的 NotFound 模块：

 Error: "Cannot find module 'function () {
        return require('@/pages/NotFound.vue');
      }'."

如果你愿意，我可以提供更多代码或解释。

我的目标是将vue-material-admin 与 Laravel 集成。

【问题讨论】：

标签： laravel vue.js webpack

【解决方案1】：

好吧，我的.babelrc错了。

这是正确的文件：

{
    "presets": [
        "stage-2"
    ],
    "plugins": ["transform-vue-jsx", "transform-runtime","syntax-dynamic-import"]
}

我对 Webpack 和 Babel 感到不舒服，所以我接受解释。

【讨论】：