在vue中import()语法不能传入变量的问题及解决


Posted in Vue.js onApril 01, 2022

import()语法不能传入变量

解决办法

一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack;

例如import(`./path/${myFile}`), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,从而实现懒加载。

import(`./path/${myFile}`),

问题

可以用

const cc = () => import('./aa.vue');  

如下代码报错

let name = '@/views/aa.vue';
const cc = () => import(name); 

或者

function jikj() {   return './gg.js'; }
const cc = () => import(jikj()); 

动态引入import()变量失效

import我们通常的用法是

import('@/pages/demo').then(item=>{})

但是现在有个需求必须要动态传入路径,发现传入变量后不能识别,代码如下

const modelpath = ‘@/pages/demo'
import(modelpath).then(item => {})

因为webpack的现在的实现方式不能实现完全动态,所以可以通过字符串模板来提供部分信息给webpack,如下

const modelpath = ‘/demo'
import(`@/pages${modelpath}`).then(item => {})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 #Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 #Vue.js
vue ref如何获取子组件属性值
Mar 31 #Vue.js
vue如何使用模拟的json数据查看效果
vue+iview实现手机号分段输入框
Mar 25 #Vue.js
Vue3中toRef与toRefs的区别
Mar 24 #Vue.js
一起来看看Vue的核心原理剖析
Mar 24 #Vue.js
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
详解vue中axios的封装
2018/07/18 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
三下乡活动方案
2014/01/31 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
中职生自荐信范文
2014/06/15 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
求职导师推荐信范文
2015/03/27 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技