最近在开发个人博客,点击文章列表显示相应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();
    }
  }

这里作一个笔记,也希望其它遇到此问题的网友能够及时修正。

Logo

前往低代码交流专区

更多推荐