Vue-router 无法延迟加载子组件

Question

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

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

我说的库保存在@/externals/date-picker里面。在我的延迟加载组件中，我使用 es6 imports:

导入它

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

这会在 vue-router:

中触发错误

Failed to resolve async component default: TypeError: Cannot set property 'vue-date-picker' of undefined

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

我很确定必须有加载外部文件的方法，即使它们是延迟加载的。所以，我的问题是，如何将外部 file/package 添加到我的延迟加载组件中？提前谢谢你。

代码

// 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 加载的。

Answer 1

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

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

Vue-router 无法延迟加载子组件

Vue-router cannot lazy load child component

javascript

lazy-loading

webpack

vue.js

vue-router