一、vue的非編譯模式

基于requireJS+VUE搭建的環境

（1）路由配置信息

A、異步加載組件

define(function(){return [{name: "my-component",path: "/myComponent",component: resolve => require(['myComponent'], resolve),}]; });

B、同步加載組件

define(['myComponent'],function(myComponent){return [{name: "my-component",path: "/myComponent",component: myComponent,}]; });

（2）組件或第三方庫

A、懶加載組件

define(function(){let dayjs=null;return {data () {},beforeCreate(){dayjs=require('dayjs');}} });

B、同步加載組件

define(['dayjs'],function(dayjs){return {data () {}} });

二、vue的編譯模式

（1）路由配置信息

A、異步加載組件

let myComponent = resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) //或者 需要syntax-dynamic-import插件 //let myComponent =()=> import('myComponent.vue')let routes=[{name: "my-component",path: "/myComponent",component: myComponent,}];

B、同步加載組件

import myComponent from 'myComponent.vue'let routes=[{name: "my-component",path: "/myComponent",component: myComponent,}];
（2）組件或第三方庫

A、懶加載組件

export default {beforeCreate () {import('dayjs').then(module => {this.dayjs = module;});},data () {return {dayjs: null}} }

B、同步加載組件

import dayjs from 'dayjs'export default {data () {},mounted () {} }（3）配置編譯多文件

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Vue组件异步加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。