时间戳

首页 > 解决方案 > 在 VueJS 中根据配置在构建时生成代码

node.js - 在 VueJS 中根据配置在构建时生成代码

问题描述

我有一个带有几个视图的 VueJS/vue-cli 应用程序。我想根据构建时配置启用/禁用一些代码。

这与开发/生产并不严格相关，但例如说我的应用程序有 3 个功能，并且我希望根据我交付产品的人有 2 个不同的构建。

例如，假设我有视图 Foo、Bar 和 Baz：我希望仅在为 Deploy1 构建时在生成的静态文件中具有 Foo 视图，仅在为 Deploy2 构建时才有 Bar，并且我总是希望在每次部署时都看到 Baz。

自然，与 Bar 相关的代码不应包含在 Deploy1 中，因此我不是在谈论运行时检查。

这在概念上类似于#ifdef宏可以在 C 中执行的操作。如何在 VueJS 和 vue-cli 中获得类似的结果？（还是一般的 NodeJS？）

提前致谢！

标签： node.jsvue.jsvue-cli

解决方案

在我的情况下，我为构建脚本使用了多个入口点：在我的 package.json 中：

 "develop:foo": "vue-cli-service build --mode develop --dest dist/foo --target app ---modern src/foo.js",
 "develop:bar": "vue-cli-service build --mode develop --dest dist/bar --target app --modern src/bar.js",

现在在 foo.js 和 bar.js 中它非常简单：它相当于你的 main.js，因此你可以在你的应用程序中包含任何插件、组件

在我的情况下，我对应用程序的两个版本使用相同的代码，但它们包含比另一个版本更多的功能，例如，在我的一个版本中，我不包括 websockets，我不包括一些第三方 api .. 。 ETC。

你几乎可以分开任何东西。

我希望能回答你的问题！

推荐阅读