vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載的方法

這篇文章主要介紹“vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載的方法”，在日常操作中，相信很多人在vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載的方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載的方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)建一個(gè)vite項(xiàng)目

性能決定成敗;vite確實(shí)快；
cmd 命令行(默認(rèn)你已經(jīng)安裝了node & npm)，執(zhí)行npm init @vitejs/app vue-study – --template vue；
cd至vue-study，npm install(安裝依賴); npm run dev（啟動(dòng)項(xiàng)目）；

創(chuàng)建組件

新建一個(gè)目錄為pages，pages下面再新建一個(gè)目錄contents，contens下面可以新建具體的組件目錄頁(yè)面，此時(shí)目錄結(jié)構(gòu)為

App.vue

<template>
 <p @click="onChangeContents('./pages/contents/gp/gp.vue')">郭培</p>
 <p @click="onChangeContents('./pages/contents/systemManges/xtcs.vue')">系統(tǒng)參數(shù)</p>
 <p>{{currentTabComponent}}</p>
 <!-- <Suspense> -->
 <component :is="DefineAsyncComponent({
     // 工廠函數(shù)
     loader: Modeuls[currentTabComponent],
     // // 默認(rèn)值：Infinity（即永不超時(shí)，單位 ms）
     timeout: 3000,
    })"></component>
 <!-- </Suspense> -->
</template>
<script lang="ts">
 import {
  defineComponent,
  defineAsyncComponent,
  reactive,
  ref
 } from 'vue'
 export default defineComponent({
  name: 'App',
  setup() {
   //vite加載指定路徑的所有模塊
   const Modeuls = import.meta.glob('./pages/contents/*/*');
   const onChangeContents = function(URL) {
    currentTabComponent.value = URL;
    console.log(currentTabComponent)
   }
   let currentTabComponent = ref('./pages/contents/systemManges/xtcs.vue');
   const DefineAsyncComponent = defineAsyncComponent;
   return {
    DefineAsyncComponent,
    currentTabComponent,
    onChangeContents,
    Modeuls
   }
  },
 })
</script>

到此，關(guān)于“vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！