Vue 延迟加载组件

Question

我想尝试在我的自定义 vue 应用程序中延迟加载模块，但遇到了问题。

基本上，我从数据库中设置了路线，其中之一是显示程序的路线（针对儿童）。在这个程序中，我加载了几个组件，如客户列表、同意书等。

目前，我是这样的：

   <div role="tabpanel" class="tab-pane" :class="{'active': current_tab == 'consent'}" id="consent" v-if="displayConsentComponent">
    <consent v-model="consents" :edit="edit"></consent>
</div>

// and they are imported like so:

<script>
    import Consent                  from './_consents';
    import AssignedStaff            from './_assigned-staff';
        ......
    export default {
        components:{
            Consent,
            AssignedStaff,
            .....
        },
        data(){
            return {
                  ..........
            }
        }
    }
</script>

但想像你一样适应它，所以我把它改成了这样：

<div role="tabpanel" class="tab-pane" :class="{'active': current_tab == 'consent'}" id="consent" v-if="displayConsentComponent">
    <consent v-model="consents" :edit="edit"></consent>
</div>

// and they are imported like so:

<script>
    const Consent       = () => import('./_consents');
    const AssignedStaff = () => import('./_assigned-staff');
        ......
    export default {
        components:{
            Consent,
            AssignedStaff,
            .....
        },
        data(){
            return {
                  ..........
            }
        }
    }
</script>

但不幸的是，我的整个应用程序无法构建和运行（如果我重新构建它），否则会出现此错误：

in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/programs/program.vue Module parse failed: E:\Gabi\khcc-crm-playground\node_modules\babel-loader\lib\index.js!E:\Gabi\khcc-crm-playground\node_modules\vue-loader\lib\selector.js?type=script&index=0!E:\Gabi\khcc-crm-playground\src\components\programs\program.vue

Unexpected token (58:8) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (58:8) at Parser.pp$4.raise (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExpression (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1573:21) at Parser.pp$1.parseReturnStatement (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:839:33) at Parser.pp$1.parseStatement (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:699:34) at Parser.pp$1.parseBlock (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:981:25) at Parser.pp$3.parseFunctionBody (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:2105:24) at Parser.pp$1.parseFunction (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1065:10) at Parser.pp$3.parseExprAtom (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1810:19) at Parser.pp$3.parseExprSubscripts (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1715:21) @ ./src/components/programs/program.vue 3:2-107

我已经更新了我的节点包，包括 vue 到最新版本（2.5.1X，如果我没记错的话），但没有用。有人可以帮我出出主意吗？

非常感谢， 加布里埃尔

Answer 1

也许您需要将异步组件移动到components。 您可以访问此处以了解更多信息： https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

<script>

    export default {
        components:{
            Consent: () => import('./_consents'),
            AssignedStaff: () => import('./_assigned-staff'),
            .....
        },
        data(){
            return {
                  ..........
            }
        }
    }
</script>