在多构建 Vue js 应用程序中定义多个配置的最佳方法是什么？

Question

我正在开发一个将为多个客户构建和部署的 Vue 3 Web 应用程序。每个客户都有自己的头衔、标志、图标等
我需要的是为每个客户构建具有特定信息的应用程序（假设在 TheFooter.vue 组件中显示客户信息）。
重要的要求是，当要为客户构建应用程序时，其他客户的信息不得包含在最终构建的文件中（我的意思是运行 npm run build 之后的 /dist 文件夹) 出于隐私原因。

我尝试过的方法：

创建一个 customers.js 文件并像这样导出一个对象：

const customers = {
  CUSTOMER_A: {
    title: 'Customer A',
    logo: 'assets/customer_a_logo.png',
    // other privacy related data
  },
  CUSTOMER_B: {
    title: 'Customer B',
    logo: 'assets/customer_b_logo.png',
    // other privacy related data
  }
export default const customer[process.env.VUE_APP_CURRENT_CUSTOMER]

然后在 .env 文件中，创建一个 VUE_APP_CURRENT_CUSTOMER 键，其值类似于 CUSTOMER_A、CUSTOMER_B、...
并在 TheFooter.vue 中导入客户数据，如下所示：
const customer = require('./customers.js').default
但通过这种方式，我分析了 /dist 文件夹中最终构建的 js，并且其他客户的信息可用。

基于Vue CLI modes，为每个客户创建一个.env.customer_x文件并在其中添加客户特定数据，然后在构建应用程序时使用[=引用当前客户22=] 标志（例如 vue-cli-service build --mode customer_x）。如果客户太多，我们最终会得到太多 .env.customer_... 文件。（此解决方案还有其他注意事项吗？）
创建一个 json 文件（例如 customers.json）并像这样在 TheFooter.vue 中使用它：
import { process.env.VUE_APP_CURRENT_CUSTOMER } from './customers.json'
但似乎无法在 import 语句中使用变量，我需要使用环境变量（对于 ci/cd 管道）

对于这个问题有什么想法或最佳实践吗？

提前致谢！

Answer 1

生成多个构建基本上是一个两步过程。

第 1 步：自定义脚本构建

编写将以编程方式调用 Webpack 的自定义构建脚本。像这样：

// build.js file
const webpack = require('webpack');

// Your webpack.config.js should export a function instead of config.
const webpackConfig = require('./webpack.config.js');

// You can require this data from other `customers.js` file.
const customers = [
  { title: 'App 1' },
  { title: 'App2' }
];

customers.forEach((customer) => {

  // Get webpack configuration for this customer.
  const config = webpackConfig(customer);

  // Invoke the webpack
  webpack(config, (err) => {
    /** Handle error here */
  });

});

您的 Webpack 配置将包含在回调函数中：

// webpack.config.js
module.exports = (customer) => {

  // This function will be called from build.js file.
  
  return {
    entry: 'index.js',
    output: { 
      // ...
    }
    // ...other webpack configuration
  };
};

第 2 步：数据注入

使用 Webpack DefinePlugin 或其他方式将此数据注入到您的实际 JavaScript 代码中。对于 HTML 页面，您可以使用 webpack-html-plugin，它也可以使用模板支持此功能。您将需要它来为客户的构建设置 <title> 和其他 HTML 元数据。

new webpack.DefinePlugin({
  CUSTOMER_DATA: JSON.stringify(customer)
});

此外，应该优化此构建脚本以处理 async 并确保为每个客户适当调整输出目录。

作为一项额外的增强，Webpack 还支持 数组配置 (multiple configurations) 以创建多个构建。您可以使用它，因为它提供开箱即用的并行构建，不需要单独的 build.js 文件。我个人喜欢保留东西 separate/modular，因此这样解释。

这里要理解的关键是，在您的实际代码中，您应该无处导入这个customers.js文件。这是一个构建时间的东西，应该只在构建时间脚本中导入。

在多构建 Vue js 应用程序中定义多个配置的最佳方法是什么？

What is the best way to define multiple configs in a multi-build Vue js app?

javascript

webpack

vue.js

vue-cli

vuejs3

第 1 步：自定义脚本构建

第 2 步：数据注入