Vue系列-import動態引入的坑

最近在開發個人部落格，點選文章列表顯示相應md文章，效果如下：

其中遇到一個坑，我通過在後端請求md檔案的path，從而在前端展示markdown檔案，具體程式碼如下：

<!--前端展示md文章-->
<vue-markdown :key="key">{{msg}}</vue-markdown>

      async getMd(){
        //通過id獲取md檔案的path
        await getArticleById(this.$route.params.id).then(res=>{
          this.arName=res.name
        })
      
      	//動態引入md文章,坑在下面這句！！！！！！
        await import(this.arName).then(myModule => {
          this.msg=  myModule.default;
        });
        //強制重新渲染
        this.key += 1 
     },

編譯的結果顯示如下：

 WARNING  Compiled with 1 warnings                                                                                               09:01:31

 warning  in ./src/views/Article.vue?vue&type=script&lang=js&

Critical dependency: the request of a dependency is an expression

最後也得不到我要的效果，根據網友的提示，發現官方文件，發現有一個黃條提示

這個現象其實是與webpack import()的實現高度相關的。由於webpack需要將所有import()的模組都進行單獨打包，所以在工程打包階段，webpack會進行依賴收集。，webpack會找到所有import()的呼叫，將傳入的引數處理成一個正則，如：

import('./app'+path+'/util') => /^./app.*/util$/

也就是說，import引數中的所有變數，都會被替換為【.*】，而webpack就根據這個正則，查詢所有符合條件的包，將其作為package進行打包。如果我們直接傳入一個變數，webpack就會把 (整個電腦的包都打包進來[不鬧]) 認為你在逗他，並且丟擲一個WARNING: Critical dependency: the request of a dependency is an expression。
所以import的正確姿勢，應該是儘可能靜態化表達包所處的路徑，最小化變數控制的區域。
如我們要引用一堆頁面元件，可以使用import(’./pages/’+ComponentName)，這樣就可以實現引用的封裝，同時也避免打包多餘的內容。於是果斷將我的程式碼進行了修改

於是得到想要的結果，原來import（）動態載入的時候要注意這麼多，下次要注意了。
為了顯示 點選直接顯示文章，應對$route做監聽，具體的應用，見https://blog.csdn.net/ws6afa88/article/details/108652794，監聽方式如下：

 watch:{
    //監聽路由變化,路由變化由點選<router-link>造成
    $route(to,from){
      //顯示markdown檔案函式
      this.getMd();
    }
  }

這裡作一個筆記，也希望其它遇到此問題的網友能夠及時修正。