Question

我在项目内使用vue-router，不幸的是，该库正在与不在活动开发中的库一起使用。我需要在其中添加一些内容，因此我下载了源代码，自己对其进行了编辑，然后将其构建到项目的“外部”文件夹中。

现在，直到项目不使用前端路由器，一切都可以正常工作，但是最近，我使用延迟加载组件实现了vue-router，事情变得有些棘手。

我刚才说的图书馆保存在@/externals/date-picker内。在我的延迟加载组件内部，我使用es6 import导入它：

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

哪个触发了vue-router内部错误：

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

我不知道发生了什么，但是似乎无法将日期选择器添加到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加载的。

Answer 1

在合并程序包时，好像我在webpack配置中缺少libraryTarget: 'window'。

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

Vue路由器无法延迟加载子组件

1 个答案: