将 webpack 从版本 3 升级到 4 后，出现“[vue-router] 路由导航期间未捕获的错误”答案

【问题标题】：After upgrade webpack from version 3 to 4 get "[vue-router] uncaught error during route navigation"将 webpack 从版本 3 升级到 4 后，出现“[vue-router] 路由导航期间未捕获的错误”
【发布时间】：2019-07-19 09:54:43
【问题描述】：

将 webpack 从版本 3 升级到 4 和第三方包后，我收到此错误：

[vue-router] 无法解析异步组件默认值：TypeError: Cannot read property 'call' of undefined

[vue-router] 路由导航期间未捕获的错误： TypeError：无法读取未定义的属性“调用” 在 webpack_require (bootstrap:63)

Webpack.js

const ENV = process.env.NODE_ENV || 'production';
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const conf = {
    entry: {
        'catalog/bonus': './app/Admin/assets/catalog/bonus/index.js'
    },
    output: {
        filename: '[name].js',
        path: `${__dirname}/public/assets/admin`,
        publicPath: '/assets/admin/',
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@src': path.resolve(__dirname)
        },
        extensions: ['*', '.js', '.vue', '.json'],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
        ],
    },
};

if (ENV === 'development') {
    conf.devtool = 'source-map';
}

module.exports = conf;

vue 路由器使用示例

import VueRouter from 'vue-router';

export default new VueRouter({
    routes: [
        {path: '/', name: 'main', component: () => import('./components/BonusList')},
        {path: '/create', name: 'create', component: () => import('./components/BonusEdit')},
    ]
});

【问题讨论】：

标签： webpack vuejs2 vue-router webpack-4

【解决方案1】：

根据documentation，VueRouter 中的组件似乎不是函数，因此不可调用。导入似乎也不起作用，因为它们返回 undefined。

您是否尝试过以下方法？

import VueRouter from 'vue-router';
import BonusList from './components/BonusList';
import BonusEdit from './components/BonusEdit';

export default new VueRouter({
    routes: [
        {path: '/', name: 'main', component: BonusList},
        {path: '/create', name: 'create', component: BonusEdit},
    ]
});

【讨论】：