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

目录
  • import()语法不能传入变量
    • 解决办法
    • 问题
  • 动态引入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 => {})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解VUE中常用的几种import（模块、文件）引入方式

    1 引入第三方插件 import echarts from 'echarts' 2 引入工具类 第一种是引入单个方法 import {axiosfetch} from './util'; 下面是写法,需要export导出 export function axiosfetch(options) { } 第二种  导入成组的方法 import * as tools from './libs/tools' 其中tools.js中有多个export方法,把tools里所有export的方法导入 vue中

  • 解决vue动态路由异步加载import组件,加载不到module的问题

    报错信息应该是这样的 webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10) 路由信息由后端给出,那么前端需要动态加载路由,同时component的路径也是后端给出,但是动态加载该路径会报错 如: // 假如path = '@/views/user' const com = () => import(path) // 这样会报错哦 const com2 = (

  • 解决vue的router组件component在import时不能使用变量问题

    webpack 编译es6 动态引入 import() 时不能传入变量,例如dir ='path/to/my/file.js' : import(dir) , 而要传入字符串 import('path/to/my/file.js'),这是因为webpack的现在的实现方式不能实现完全动态. 但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack:例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,

  • 详解vue-router的Import异步加载模块问题的解决方案

    1.问题现象 2.出现问题的代码点 3.替代方案: 把import() 替换成如下: Promise.resolve().then(()=>require(`@/views/${str}`)) 4.原因分析 项目在编译时,出现一个警告 这个警告的含义: require接收了一个变量,会报上面的警告,接收一个写死的字符串值时则没有警告! 我们通过控制台查看到import()对应编译过后的代码: 从上图可以看到require接收了一个变量,所以运行时出现了警告. 那这样就会报上面找不到对应的模块.

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

    目录 import()语法不能传入变量 解决办法 问题 动态引入import()变量失效 import()语法不能传入变量 解决办法 一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack: 例如import(`./path/${myFile}`), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,从而实现懒加载. import(`./path/${myFile}`), 问题 可以用 const cc = () => import('./aa.vue

  • vue中setup语法糖写法实例

    目录 变量声明 父传子 子传父 变量声明 变量声明定义的时候,不需要返回可以直接使用即可 没有使用setup语法糖时写法 <script> import {useStore} from 'vuex' export default { setup() { const store=useStore() const plus=()=>{ store.commit('plus') } return {plus} }, } </script> 使用setup语法糖写法 <scri

  • Vue中import from的来源及省略后缀与加载文件夹问题

    Vue使用import ... from ...来导入组件,库,变量等.而from后的来源可以是js,vue,json.这个是在webpack.base.conf.js中设置的: module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } } ... } 这里的extensions指定了from后可导入的文件类型. 而上面定义的这3类可导入文件,js和vue是

  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    目录 前言 实现 第一种情况 第二种情况 语法 方法一 方法二 总结 前言 在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况. 实现 第一种情况 如果是对于代码中实实在在存在的 HTML 标签,我们可以直接绑定变量来设置样式,比如改变表格的边框. 先设置一个表格边框样式的 JS 变量(table_border). 再在 HTML 标签的 style 属性上绑定该 JS 变量. <template> <div class="app-

  • vue中使用iview自定义验证关键词输入框问题及解决方法

    一.验证需求 对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法 在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru

  • Vue 中 a标签上href无法跳转的解决方式

    问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s

  • vue中scss语法的使用你了解吗

    目录 vue之scss语法使用 引入scss文件 css / test.scss home.vue scss定义一个变量 scss里面使用算法 ±*/ 定义mixin函数 使用占位符 padding margin等 继承 @entend XX 总结 vue之scss语法使用 引入scss文件 css / test.scss $testColor:red; home.vue <!-- 描述: 作者:xzl 时间:03月30日190506 --> <template> <div

  • webstorm和.vue中es6语法报错的解决方法

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错. 2. .vue文件中es6语法报错 (1)打开 Settings => File Types 找到 HTML 添加 *.vue 这样vue文件就相当于html

  • vue中radio根据动态值绑定checked无效的解决

    vue中radio根据动态值绑定checked无效的解决

    目录 1.问题分析 2.vue中分析(完成代码请看后面) 3.完成代码(该例子中input是自定义的样式) 1)json数据 2)html代码 3)css样式 4.效果图 1.问题分析 在vue之前,我们想要获取某一组(设置相同的name属性)radio的选中状态是通过name属性获取,判断input的checked是true还是false,但是当列表中有多组(动态获取)就显得很乏力:vue出现后我们可以通过v-model很巧妙的完成. 2.vue中分析(完成代码请看后面) <input :na

  • vue中使用mixins/extends传入参数的方式

    目录 使用mixins/extends传入参数 vue mixins的原理 使用mixins/extends传入参数 最近做报表页面,基本都是列表页面,所以想用mixins. 但是接口的url不同,于是考虑怎么才能传入参数去适配各个页面. 后来发现mixin文件可以写个函数,接受传递过来的参数,然后return一个对象. 大概如下: mixin.js export default function(config) {     let {         listUrl="",    

随机推荐