Vue ленивый загрузки компонентов - PullRequest
Новая
       7

Vue ленивый загрузки компонентов

0 голосов
/ 06 июня 2018

Я хотел попытаться лениво загрузить модуль в мое пользовательское приложение 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, если я правильно помню), но безрезультатно.Может ли кто-нибудь помочь мне с некоторыми мыслями?

Очень признателен, Габриэль

1 Ответ

0 голосов
/ 03 октября 2018

Возможно, вам нужно переместить асинхронный компонент на 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>
...