美文网首页
(原创)vue-router的Import() 异步加载模块问题

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

作者: raysonfang | 来源:发表于2020-05-13 10:06 被阅读0次

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

1、问题现象

2、出现问题的代码点

3、替代方案:

import() 替换成如下:

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

4、原因分析

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


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

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


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

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

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


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

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

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

相关文章

  • (原创)vue-router的Import() 异步加载模块问题

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 2、出现问题的代码点 3、替代方案: 把import() 替...

  • webpack打包代码实现

    webpack模块加载 异步模块加载 通过 import()实现指定模块的懒加载操作 懒加载的核心原理就是创建js...

  • Vue-router路由使用

    1.需要导入vue模块 import Vue from 'vue' 需要导入vue-router模块 import...

  • AMD

    AMD, Asynchronous Module Definition,即异步模块加载机制,它采用异步方式加载模块...

  • 代码模块化

    2 ES6模块 ES6模块基于文件,一个文件就是一个模块。ES6模块支持异步模块加载。关键字:import和exp...

  • Python动态创建类对象,并调用函数

    1. 首先import相关模块`import importlib` 2. 加载你想要加载的模块`model = i...

  • react记录 二

    目录 一.react异步加载组件,分模块加载,提高打开性能 二. 三. 四. 一.react异步加载组件,分模块加...

  • SplitChunks插件配置选项

    chunks选项,决定要提取那些模块。默认是async:只提取异步加载的模块出来打包到一个文件中。异步加载的模块:...

  • JS 模块化方案对比

    1. CommonJS 规范(同步加载 NodeJS) 2. AMD(异步加载模块 requireJS) 采用异步...

  • 模块化编程--require使用

    AMD--require AMD规范:异步模块加载机制 服务器端 -- 同步加载 浏览器端 -- 异步加载 ...

网友评论

      本文标题:(原创)vue-router的Import() 异步加载模块问题

      本文链接:https://www.haomeiwen.com/subject/hvignhtx.html