Vue-router不能延迟加载子组件-Java 学习之路

我正在我的项目中使用vue-router，它正在使用一个库，不幸的是，它不再处于活动开发状态 . 我需要在那里添加一些东西，所以我下载了源代码，自己编辑了它，然后将它构建到我的项目的“externals”文件夹中 .

现在，直到该项目没有使用前端路由器一切正常，但最近，我使用延迟加载组件实现了vue-router，事情变得有点棘手 .

我正在谈论的图书馆被保存在 @/externals/date-picker 内 . 在我的懒惰加载组件中，我使用es6导入导入它：

import DatePicker from '@/externals/date-picker';

这会在 vue-router 内触发错误：

无法解析异步组件默认值：TypeError：无法设置未定义的属性'vue-date-picker'

我不知道发生了什么，但似乎无法将日期选择器添加到 module.exports .

我很确定必须有加载外部文件的方法，即使它们是延迟加载的 . 所以，我的问题是，如何将外部文件/包添加到我的延迟加载组件？先感谢您 .

CODE

// router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/something',
            name: 'something',
            title: 'something',
            component: () => import(/* webpackChunkName: "something" */ './views/Component.vue')
        }
    ]
});

// Component.vue
<script>
    import DatePickerOriginal from "@/external/date-picker";

    export default {
        components: {
            DatePickerOriginal
        }
    };
</script>

@/external/date-picker 的源代码几乎与here相同（嗯，构建工具是相同的，应用程序本身很可能不会导致问题） . 此外，再次指出，应用程序不在其他软件包的 node_modules 文件夹中，但是从 @/externals/date-picker 加载，这可能会更好 .

1 回答

看起来我在我的webpack配置中缺少 libraryTarget: 'window' ，同时在构建过程中合并包 .

merge(commonConfig, {
    entry: path.resolve(__dirname + '/src/plugin.js'),
    output: {
        // ...
        libraryTarget: 'window'
    }
})

回复于 2024-05-02T10:33:20+08:00

Vue-router不能延迟加载子组件

1 回答

相关问题