时间戳

首页 > 解决方案 > 将 webpack 从版本 3 升级到 4 后，出现“[vue-router] 路径导航期间未捕获的错误”

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

问题描述

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

[vue-router] 无法解析异步组件默认值：TypeError：无法读取未定义的属性“调用”

[vue-router] 路由导航期间未捕获的错误：TypeError: Cannot read property 'call' of undefined at 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')},
    ]
});

标签： webpackvuejs2vue-routerwebpack-4

解决方案

根据文档，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},
    ]
});

推荐阅读