vue.js - vue异步加载组件require路径变量问题

问题描述

问 题

webapck配置

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  },

使用的是vue-cli(webpack2+vue2.6),功能是循环一个数据拿出里面的path放到require进行异步加载

Vue.component(component, function (resolve, reject) {
    // 比如这个path的值是@/pages/count的话，貌似解析成字符串，不会加载组件
    require([`${path}.vue`], resolve) // 不能解析
})

然后如果是这样的话就可以解释

Vue.component(component, function (resolve, reject) {
    require([`@/pages/count`], resolve) // 可以解析
 })

试了其他的require.ensure和import都是这样的结果，问题聚焦在require如果是变量，都没法正确解析，有人有办法吗，如果解析webpack alias别名@的路径？

解决方案

我测试了一下，变量可以解析，但前提是不能包含别名路径@。

//main.js
var path1='./App'
var path2='@/App'
Vue.component("app", function (resolve, reject) {
  require([`${path1}.vue`], resolve) // 可以解析
  // require([`${path2}.vue`], resolve) // 没法解析
 // require([`@/App.vue`], resolve) // 可以解析
 
})
//webpack.config.js
 resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    }
  }

这篇关于vue.js - vue异步加载组件require路径变量问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！