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

Posted 2023-02-23

【中文标题】在多构建 Vue js 应用程序中定义多个配置的最佳方法是啥？

【英文标题】：What is the best way to define multiple configs in a multi-build Vue js app?在多构建 Vue js 应用程序中定义多个配置的最佳方法是什么？

【发布时间】：2021-12-04 16:49:26

【问题描述】：

我正在开发一个 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文件并在其中添加客户特定的数据，然后在构建应用程序时使用--mode标志（例如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 语句中使用变量，我需要使用 env 变量（用于 ci/cd 管道）

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

提前致谢！

【参考方案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 文件。我个人喜欢将事物分开/模块化，因此以这种方式进行解释。

这里要理解的关键是，在你的实际代码中，你应该nowhere导入这个customers.js文件。这是构建时的事情，应该只在构建时脚本中导入。

【讨论】：

DefinePlugin 很好地解决了我的问题 :)