[英]Vue lazy-loading components
我想尝试在我的自定义 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,如果我没记错的话),但无济于事。 有人可以帮我想想吗?
非常感谢,加布里埃尔
也许您需要将 async 组件移动到components
。 您可以访问此处了解更多信息: https ://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
<script>
export default {
components:{
Consent: () => import('./_consents'),
AssignedStaff: () => import('./_assigned-staff'),
.....
},
data(){
return {
..........
}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.