Использовать динамический импорт в Vue Router с Laravel Mix - PullRequest
0 голосов
/ 31 октября 2018

Я использую laravel 5.7 с Vue 2.5 и VueRouter 3.0.

Я хочу использовать динамические модули ( см. Здесь ).

Это мой .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.

1 Ответ

0 голосов
/ 31 октября 2018

Хорошо, правильно, мой .babelrc был неправ.

Это правильный файл:

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

Я не чувствую себя комфортно с Webpack и Babel, поэтому я принимаю объяснения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...