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

【问题标题】：Vue-router cannot lazy load child componentVue-router 不能延迟加载子组件
【发布时间】：2019-03-13 03:54:24
【问题描述】：

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

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

我所说的库保存在@/externals/date-picker 中。在我的延迟加载组件中，我使用 es6 导入来导入它：

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

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

无法解析异步组件默认值：TypeError: Cannot set property 'vue-date-picker' of undefined

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

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

代码

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

【问题讨论】：

我不确定你在问什么。然而延迟加载是关于 webpack 的，你可以通过：() => import something from somewhere
你能添加一些代码吗？如果你有一个库，它可以从节点模块导入，例如 moment.js：import moment from 'moment'
@roliroli 当然，感谢您的关注。问题已更新。我猜所有相关的代码都在那里。
在我看来，这个包没有正确构建，但我不确定我能做些什么来解决这个问题。我在构建它时没有改变任何东西，但 output.path.配置可以在here找到。
那么 DatePickerOriginal 是一个组件吗？你能展示一些代码吗？

标签： javascript vue.js webpack lazy-loading vue-router

【解决方案1】：

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

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

【讨论】：