可选地在 Vue 中导入组件

Question

我有几种菜单类型，想配置要在.env.local 中使用的菜单类型，例如： VUE_APP_MENU_TYPE=2

在我的 javascript 文件中，我有以下内容：

let menu = false;
if (process.env.VUE_APP_MENU_TYPE === "2") {
  menu = require("./type2/Type2.vue");
}
if (menu === false) {//default menu if env is missing
  menu = require("./default/Default.vue");
}
export default menu;

这将导致错误Failed to mount component: template or render function not defined.

我可以执行以下操作：

import Default from "./default/Default.vue";
import Type2 from "./type2/Type2.vue";
let menu = Default;
if (process.env.VUE_APP_MENU_TYPE === "2") {
  menu = Type2;
}
export default menu;

这将起作用，但所有菜单都在代码中编译，包括永远不会使用的菜单，因为 VUE_APP_MENU_TYPE 在编译时是已知的，并且在您重新编译之前永远不会改变。

是否可以在编译时动态导入组件？

Answer 1

试试menu = require("./type2/Type2.vue").default;

来自这个答案的解释

在处理 ES6 导入（ export default MyComponent ）时，导出模块的格式为{"default": MyComponent} 。 import语句为您正确处理此分配，但是，您必须自己进行require("./mycomponent").default转换。 如果您想避免这种情况，请使用module.exports而不是export default

堡垒第二部分问题...

是否可以在编译时动态导入组件？

真的从未尝试过，但我有疑问。 Webpack 在构建时没有执行代码。 它只是扫描它的一些模式。

1. 它扫描require()以便知道应该在包中包含哪些模块
2. DefinePlugin正在用env文件中的值替换诸如process.env.VUE_APP_MENU_TYPE之类的字符串，因此它使代码看起来像if ("3" === "2") {
3. 其他插件能够检测到if ("3" === "2") {永远不会为true并消除“死亡代码”

真正的问题是先发生什么 - 如果在消除死亡代码之前发生require扫描，您最终将获得捆绑包中所有可能的菜单组件。 但不幸的是我不知道 - 你必须尝试

另一方面，使用动态异步组件（如其他答案中所述）是肯定的。 是的，Webpack 将构建所有可能的菜单组件，但每个组件都有自己的 js 块（ dist文件夹中的 js 文件）。 如果应用程序只加载其中一个，对我来说似乎没问题（请注意，加载将是异步的 - 在运行时 - 所以这意味着多了一个服务器请求）

Answer 2

我认为动态加载组件是您拥有的最佳选择。 https://v2.vuejs.org/v2/guide/components-dynamic-async.html

Answer 3

我可以通过 webpack 设置解决这个问题。

在 vue.config.js 中

const path = require("path");

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        MENU: path.resolve(
          __dirname,
          (() => {
            if (process.env.VUE_APP_MENU_TYPE === "2") {
              return "src/components/header/CategoriesMenu/Type2/Type2.vue";
            }
            return "src/components/header/CategoriesMenu/Default/Default.vue";
          })()
        ),
      },
    },
  },
};

在 src/components/header/CategoriesMenu/index.js

import menu from "MENU";
export default menu;

但老实说，我更喜欢require 。