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

 更新时间:2022年04月01日 12:02:33   作者:一年八个月  
这篇文章主要介绍了在vue中import()语法不能传入变量的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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中的v-if基本使用(最新推荐)

    vue中的v-if基本使用(最新推荐)

    v-if根据表达式的真假,切换元素的显示和隐藏操作DOM元素,这篇文章主要介绍了vue中的v-if基本使用,需要的朋友可以参考下
    2022-12-12
  • vue+elementUl导入文件方式(判断文件格式)

    vue+elementUl导入文件方式(判断文件格式)

    这篇文章主要介绍了vue+elementUl导入文件方式(判断文件格式),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue+element 模态框表格形式的可编辑表单实现

    vue+element 模态框表格形式的可编辑表单实现

    这篇文章主要介绍了vue+element 模态框表格形式的可编辑表单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue实现列表垂直无缝滚动

    vue实现列表垂直无缝滚动

    这篇文章主要为大家详细介绍了vue实现列表垂直无缝滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 让Vue响应Map或Set的变化操作

    让Vue响应Map或Set的变化操作

    这篇文章主要介绍了让Vue响应Map或Set的变化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue+swiper实现组件化开发的实例代码

    vue+swiper实现组件化开发的实例代码

    这篇文章主要介绍了vue+swiper实现组件化开发的相关资料,需要的朋友可以参考下
    2017-10-10
  • vue.js通过自定义指令实现数据拉取更新的实现方法

    vue.js通过自定义指令实现数据拉取更新的实现方法

    数据拉取更新这个功能相信大家基本都见过,但是如果要做起来却不止如何做起,所以这篇文章给大家分享了vue.js通过自定义指令实现的方法,阅读本文需要对vue有一定理解,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • vue页面锁屏的完美解决方法记录

    vue页面锁屏的完美解决方法记录

    锁屏是指用户暂时离开时点击锁屏,用户无法跳转到其他页面,回来输入密码点击解锁,下面这篇文章主要给大家介绍了关于vue页面锁屏的完美解决方法,需要的朋友可以参考下
    2022-06-06
  • Vue DPlayer详细使用教程含遇到坑

    Vue DPlayer详细使用教程含遇到坑

    Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,本文给大家介绍Vue DPlayer详细使用,本文将从四个方面对Vue-DPlayer进行详细的阐述,感兴趣的朋友一起看看吧
    2023-10-10
  • 详解如何在vue+element-ui的项目中封装dialog组件

    详解如何在vue+element-ui的项目中封装dialog组件

    这篇文章主要介绍了详解如何在vue+element-ui的项目中封装dialog组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论