0

我在实现动态导入时遇到了麻烦（我可能只是对这个概念缺乏理解）。

我有一个vue.js用. 所有框架都是最新的稳定版本。我希望这个应用程序支持插件组件。该插件在应用程序配置中定义，然后通过动态导入加载并可以在某处显示。typescriptwebpack

我在 Webpack config 中设置了两个单独的配置，一个用于应用程序，另一个用于插件：

webpack.config.js：

...
var main = Object.assign({
        entry: {
           Home: './ViewModels/Home/main.ts'
        },
        output: {
            path: path.join(__dirname, "./Scripts/dist/"),
            filename: "[name].js",
            chunkFilename: '[name].js'
        },
    },
    vueJsConfig);

var testChunkConfig = Object.assign({
        entry: {
           TestChunk: './ViewModels/Test/registrations.ts'
        },
        output: {
            path: path.join(__dirname, "./Scripts/dist/"),
            filename: "[name].js",
            chunkFilename: '[name].js'
        },
    },
    vueJsConfig);


module.exports = [main, testChunkConfig];

`~/ViewModels/TestChunk/registrations.ts':

import Vue from "vue";
Vue.component('testExternal', require('./testExternalComponent.vue').default);

`~/ViewModels/Home/main.ts':

...
let test = "TestChunk";
import(test);
...

用法： ~/ViewModels/Components/ProjectAdministration/Test/projectAdminTest.vue

<template>
    <div>
        <h2>Test Page</h2>
        <testExternal></testExternal>
    </div>
</template>

不幸的是，这显示了一个错误：

Uncaught (in promise) Error: Cannot find module 'TestChunk'
    at eval (eval at ./ViewModels/Home lazy recursive
4

0 回答 0