从变量中动态加载 Vue 组件

Posted 2023-02-23

【中文标题】从变量中动态加载 Vue 组件

【英文标题】：Dynamically Load Vue Component from a variable

【发布时间】：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自带的

【参考方案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