(原创)vue-router的Import() 异步加载模块问题的解决方案

关注不迷路,如果解决了问题,留下个赞。

1、问题现象

2、出现问题的代码点

3、替代方案:

import() 替换成如下:

Promise.resolve().then(()=>require(`@/views/${str}`))

4、原因分析

项目在编译时,出现一个警告


这个警告的含义:
require接收了一个变量,会报上面的警告,接收一个写死的字符串值时则没有警告!

我们通过控制台查看到import()对应编译过后的代码:


从上图可以看到require接收了一个变量,所以运行时出现了警告。

那这样就会报上面找不到对应的模块。

那我们再来看一个import()正确编译过后的代码:


通过对比编译过后的代码,可以轻易发现不同点。

花了大量时间,去找node_modules中的那个包版本不一致导致的,有一次尝试成功了, 但回想不起是哪一步操作的呢,再复现的时候,也没对了。先暂时搁置吧,希望对webpack和Babel熟悉的大佬看到,能指点一二了。

所以根据编译过后的代码,以及require的特性,尝试出了一个临时解决方案。

原文链接:segmentfault.com

上一篇:10 分钟入门 -- 基于浏览器与YOLO 的图像识别
下一篇:observablehq 美国 COVID-19 确诊数曲线

相关推荐

  • 重构smart-import

    前情提要 自动 Import 工具,前端打字员的自我救赎 记第一次发布npm包经历,smart-import GitHub:smart-import develop是重构中的代码 master是1.0...

    3 年前
  • 重拾vue--vue-router进阶

    路由组件传参 HTML5 History模式 导航守卫 路由元信息 过渡效果 name="router",对应class中的router-enter <transition-group ...

    1 年前
  • 通过vue-router学习vue

    vue-router是vue官方支持,可以看做vue最佳实践本文大致梳理vue-router源码各个文件大体作用,不深入细节建议对照vue-router源码阅读 src/index.js 1. Vue...

    5 个月前
  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,...

    4 年前
  • 详解react-router 4.0 下服务器如何配合B

    react-router作为react框架路由解决方案在react项目中举足轻重。 在react-router 4.0版本中,API与先前版本相比有了很大的修改,在2.0、3.0中常用的组件作为路由底...

    3 年前
  • 记第一次发布npm包经历,smart-import,node-command-line-tool

    故事背景 前情提要:自动 Import 工具,前端打字员的自我救赎 github: smart-import smart-import 的功能 根据配置文件,在目标文件中自动导入规定目录下自定义模块,...

    3 年前
  • 让我们来重新设计一下 koa-router

    前言 koa-router 是目前用的比较多的 Koa 的路由中间件之一,前段时间由于作者没有精力继续维护而将其公开售卖。我们有些项目也用到了这个库,但是目前很多我们想要的特性都没有,比如生成接口文档...

    2 年前
  • 解析 connected-react-router

    connected-react-router这个库帮我们实现了在 redux 中操作路由方法,并将路由变化的信息同步在 redux 的 store 中。实现流程actions 封装 push、repl...

    1 个月前
  • 解决低版本的浏览器不支持es6的import问题

    解决方法: 1. 2. 下载最新版本的chrome浏览器 以上这篇解决低版本的浏览器不支持es6的import问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持JavaSc...

    3 年前
  • 解决vue-router跳转页面,返回上一页跳回指定位置

    项目要求(商品列表):pageA -> pageB -> pageA 但上面很多时候,因页面需求原因,不能使用这种实现方式,在网上找了很多方法,但是都不是很好用,现在自己实现了一个还算不错...

    2 年前

官方社区

扫码加入 JavaScript 社区