从变量中动态加载 Vue 组件答案

【问题标题】：Dynamically Load Vue Component from a variable从变量中动态加载 Vue 组件
【发布时间】：2018-05-22 18:11:28
【问题描述】：

我正在构建一个非常大的企业应用程序，其中组件按需加载，我曾经使用 require.js 并且我能够做到require(stringVar){..}

但我无法在 webpack 中做到这一点，我认为 webpack 在所有方面都更好

var URL ="./components/async.vue";
      console.log(typeof(URL));
      Vue.component("async", function(resolve) {
        // Master Loader
        require([URL], resolve);
      });

我将 require(["./components/async.vue"], resolve); 的值更改为 require([URL], resolve); 它抛出的所有内容

Critical dependency: the request of a dependency is an expression

【问题讨论】：

这个require 属于 ES6 还是 require.js (AMD)？
ES6，vue-cli自带的

标签： webpack vue.js vue-component

【解决方案1】：

我在我们的应用程序中经常这样做，但不是以这种特定方式。但是，我认为resolve 应该发回组件的定义。

你c(/sh)可以试试：

resolve(require(URL))

疑问：上面提到的URL 是服务器上的资源命中/只是两个组件之间的相对路径吗？

【讨论】：

上面使用的 require 是 ES6 版本（或导入）而不是 AMD require。
相信我，如果 URL 是一个变量而不是像“./comp.....”这样的静态值，你不能做 resolve(require(URL))，否则你必须明确地硬核该值webpack 失败..
只是好奇：require(prefix + 'url' + suffix) 不适合你？
我刚从 require.js 到 webpack.js，如果你将一个概念应用到另一个概念上会很混乱。但无论如何，谢谢，我之前对此一无所知

【解决方案2】：

这解决了使用 Webpack 上下文依赖管理的问题

var Dynamic_address = "./component/myfirstcomp.vue";

require("./template/" + Dynamic_address + ".vue");

https://webpack.js.org/guides/dependency-management/#require-context

【讨论】：